Maison > Article > interface Web > Exemple d'analyse de l'implémentation jQuery du tri des en-têtes de table avec data_jquery groupé
Exemple d'analyse de l'implémentation jQuery du tri des en-têtes de table avec data_jquery groupé
- WBOYoriginal
- 2016-05-16 15:30:121426parcourir
L'exemple de cet article décrit comment jQuery implémente le tri des en-têtes de tableau avec des données groupées. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Comme indiqué ci-dessous :
Exigence : Lorsque vous cliquez sur l'en-tête du tableau pour trier, la relation hiérarchique des données entre "Groupe" et "Détails du groupe" reste inchangée
J'ai trouvé un tableau de tri régulier sur Internet, je l'ai modifié pour répondre au "support de groupe" et je l'ai posté ici pour sauvegarde
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.tbl-list, .tbl-list td, .tbl-list th {
border: solid 1px #000;
border-collapse: collapse;
padding: 10px;
margin: 15px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<title>table sort</title>
<script type="text/javascript">
//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
function sortAble(th, tableId, iCol, dataType) {
var ascChar = "▲";
var descChar = "▼";
var table = document.getElementById(tableId);
//排序标题加背景色
for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
var th = $(table.tHead.rows[0].cells[t]);
var thText = th.html().replace(ascChar, "").replace(descChar, "");
if (t == iCol) {
th.css("background-color", "#ccc");
}
else {
th.css("background-color", "#fff");
th.html(thText);
}
}
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
//将得到的行放入数组，备用
for (var i = 0; i < colRows.length; i++) {
//注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
//if ($(colRows[i]).attr("group") != undefined) {
aTrs.push(colRows[i]);
//}
}
//判断上一次排列的列和现在需要排列的是否同一个。
var thCol = $(table.tHead.rows[0].cells[iCol]);
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
//如果不是同一列，使用数组的sort方法，传进排序函数
aTrs.sort(compareEle(iCol, dataType));
}
var oFragment = document.createDocumentFragment();
for (var i = 0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
//记录最后一次排序的列索引
table.sortCol = iCol;
//给排序标题加“升序、降序” 小图标显示
var th = $(table.tHead.rows[0].cells[iCol]);
if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
th.html(th.html() + ascChar);
}
else if (th.html().indexOf(ascChar) != -1) {
th.html(th.html().replace(ascChar, descChar));
}
else if (th.html().indexOf(descChar) != -1) {
th.html(th.html().replace(descChar, ascChar));
}
//重新整理分组
var subRows = $("#" + tableId + " tr[parent]");
for (var t = subRows.length - 1; t >= 0 ; t--) {
var parent = $("#" + tableId + " tr[group='" + $(subRows[t]).attr("parent") + "']");
parent.after($(subRows[t]));
}
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch (dataType) {
case "int":
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
case "string":
default:
return sValue.toString();
}
}
//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
if (vValue1 < vValue2) {
return -1;
}
else {
return 1;
}
};
}
//去掉html标签
function removeHtmlTag(html) {
return html.replace(/<[^>]+>/g, "");
}
//jQuery加载完以后，分组行高亮背景，分组明细隐藏
$(document).ready(function () {
$("tr[group]").css("background-color", "#ff9");
$("tr[parent]").hide();
});
//点击分组行时，切换分组明细的显示/隐藏
function showSub(a) {
var groupValue = $(a).parent().parent().attr("group");
var subDetails = $("tr[parent='" + groupValue + "']");
subDetails.toggle();
}
</script>
</head>
<body>
<table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th onclick="sortAble(this,'tableId', 1,'string')"
style="cursor:pointer">姓名</th>
<th onclick="sortAble(this,'tableId', 2, 'date')"
style="cursor:pointer">生日</th>
<th onclick="sortAble(this,'tableId', 3, 'int')"
style="cursor:pointer">年龄</th>
<th onclick="sortAble(this,'tableId', 4, 'float')"
style="cursor:pointer">工资</th>
</tr>
</thead>
<tbody>
<tr group="A">
<td>1</td>
<td><a href="#" onclick="showSub(this)">Group-A</a></td>
<td>01/12/1982</td>
<td>25</td>
<td>1000.50</td>
</tr>
<tr parent="A">
<td>2</td>
<td>A-01</td>
<td>01/09/1982</td>
<td>25</td>
<td>2000.10</td>
</tr>
<tr parent="A">
<td>3</td>
<td>A-02</td>
<td>01/10/1982</td>
<td>26</td>
<td>2000.20</td>
</tr>
<tr group="B">
<td>4</td>
<td><a href="#" onclick="showSub(this)">Group-B</a></td>
<td>10/14/1999</td>
<td>18</td>
<td>1000.20</td>
</tr>
<tr parent="B">
<td>5</td>
<td>B-01</td>
<td>02/12/1982</td>
<td>19</td>
<td>3000.20</td>
</tr>
<tr parent="B">
<td>6</td>
<td>B-02</td>
<td>03/12/1982</td>
<td>20</td>
<td>3000.30</td>
</tr>
<tr group="C">
<td>7</td>
<td><a href="#" onclick="showSub(this)">Group-C</a></td>
<td>10/14/1980</td>
<td>8</td>
<td>1000.30</td>
</tr>
<tr parent="C">
<td>8</td>
<td>C-01</td>
<td>03/12/1981</td>
<td>17</td>
<td>3100.30</td>
</tr>
</tbody>
</table>
</body>
</html>
J'espère que cet article sera utile à tous ceux qui programment jQuery.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple simple de démonstration de la façon d'utiliser la case à cocher dans jquery_jqueryArticle suivant：Exemple simple de démonstration de la façon d'utiliser la case à cocher dans jquery_jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript