javascript: 带分组数据的Table表头排序
浏览数：82 /
时间：2015年06月08日
如下图：
要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变
从网上找了一段常规的table排序，改了改，以满足“分组支持”，贴在这里备份
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 .tbl-list, .tbl-list td, .tbl-list th { 7 border: solid 1px #000; 8 border-collapse: collapse; 9 padding: 10px; 10 margin: 15px; 11 } 12 </style> 13 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> 14 <title>table sort</title> 15 <script type="text/javascript"> 16 //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型 17 function sortAble(th, tableId, iCol, dataType) { 18 19 var ascChar = "▲"; 20 var descChar = "▼"; 21 22 var table = document.getElementById(tableId); 23 24 //排序标题加背景色 25 for (var t = 0; t < table.tHead.rows[0].cells.length; t++) { 26 var th = $(table.tHead.rows[0].cells[t]); 27 var thText = th.html().replace(ascChar, "").replace(descChar, ""); 28 if (t == iCol) { 29 th.css("background-color", "#ccc"); 30 } 31 else { 32 th.css("background-color", "#fff"); 33 th.html(thText); 34 } 35 36 } 37 38 var tbody = table.tBodies[0]; 39 var colRows = tbody.rows; 40 var aTrs = new Array; 41 42 //将得到的行放入数组，备用 43 for (var i = 0; i < colRows.length; i++) { 44 //注：如果要求“分组明细不参与排序”，把下面的注释去掉即可 45 //if ($(colRows[i]).attr("group") != undefined) { 46 aTrs.push(colRows[i]); 47 //} 48 } 49 50 51 //判断上一次排列的列和现在需要排列的是否同一个。 52 var thCol = $(table.tHead.rows[0].cells[iCol]); 53 if (table.sortCol == iCol) { 54 aTrs.reverse(); 55 } else { 56 //如果不是同一列，使用数组的sort方法，传进排序函数 57 aTrs.sort(compareEle(iCol, dataType)); 58 } 59 60 var oFragment = document.createDocumentFragment(); 61 for (var i = 0; i < aTrs.length; i++) { 62 oFragment.appendChild(aTrs[i]); 63 } 64 tbody.appendChild(oFragment); 65 66 //记录最后一次排序的列索引 67 table.sortCol = iCol; 68 69 //给排序标题加“升序、降序” 小图标显示 70 var th = $(table.tHead.rows[0].cells[iCol]); 71 if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) { 72 th.html(th.html() + ascChar); 73 } 74 else if (th.html().indexOf(ascChar) != -1) { 75 th.html(th.html().replace(ascChar, descChar)); 76 } 77 else if (th.html().indexOf(descChar) != -1) { 78 th.html(th.html().replace(descChar, ascChar)); 79 } 80 81 //重新整理分组 82 var subRows = $("#" + tableId + " tr[parent]"); 83 for (var t = subRows.length - 1; t >= 0 ; t--) { 84 var parent = $("#" + tableId + " tr[group=‘" + $(subRows[t]).attr("parent") + "‘]"); 85 parent.after($(subRows[t])); 86 } 87 } 88 89 //将列的类型转化成相应的可以排列的数据类型 90 function convert(sValue, dataType) { 91 switch (dataType) { 92 case "int": 93 return parseInt(sValue, 10); 94 case "float": 95 return parseFloat(sValue); 96 case "date": 97 return new Date(Date.parse(sValue)); 98 case "string": 99 default: 100 return sValue.toString(); 101 } 102 } 103 104 //排序函数，iCol表示列索引，dataType表示该列的数据类型 105 function compareEle(iCol, dataType) { 106 return function (oTR1, oTR2) { 107 108 var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType); 109 var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType); 110 if (vValue1 < vValue2) { 111 return -1; 112 } 113 else { 114 return 1; 115 } 116 117 }; 118 } 119 120 //去掉html标签 121 function removeHtmlTag(html) { 122 return html.replace(/<[^>]+>/g, ""); 123 } 124 125 126 //jQuery加载完以后，分组行高亮背景，分组明细隐藏 127 $(document).ready(function () { 128 $("tr[group]").css("background-color", "#ff9"); 129 $("tr[parent]").hide(); 130 }); 131 132 133 //点击分组行时，切换分组明细的显示/隐藏 134 function showSub(a) { 135 var groupValue = $(a).parent().parent().attr("group"); 136 var subDetails = $("tr[parent=‘" + groupValue + "‘]"); 137 subDetails.toggle(); 138 } 139 140 141 </script> 142 </head> 143 144 <body> 145 146 <table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0"> 147 <thead> 148 <tr> 149 <th>序号</th> 150 <th onclick="sortAble(this,‘tableId‘, 1,‘string‘)" 151 style="cursor:pointer">姓名</th> 152 <th onclick="sortAble(this,‘tableId‘, 2, ‘date‘)" 153 style="cursor:pointer">生日</th> 154 <th onclick="sortAble(this,‘tableId‘, 3, ‘int‘)" 155 style="cursor:pointer">年龄</th> 156 <th onclick="sortAble(this,‘tableId‘, 4, ‘float‘)" 157 style="cursor:pointer">工资</th> 158 </tr> 159 </thead> 160 <tbody> 161 <tr group="A"> 162 <td>1</td> 163 <td><a href="#" onclick="showSub(this)">Group-A</a></td> 164 <td>01/12/1982</td> 165 <td>25</td> 166 <td>1000.50</td> 167 </tr> 168 <tr parent="A"> 169 <td>2</td> 170 <td>A-01</td> 171 <td>01/09/1982</td> 172 <td>25</td> 173 <td>2000.10</td> 174 </tr> 175 <tr parent="A"> 176 <td>3</td> 177 <td>A-02</td> 178 <td>01/10/1982</td> 179 <td>26</td> 180 <td>2000.20</td> 181 </tr> 182 <tr group="B"> 183 <td>4</td> 184 <td><a href="#" onclick="showSub(this)">Group-B</a></td> 185 <td>10/14/1999</td> 186 <td>18</td> 187 <td>1000.20</td> 188 </tr> 189 <tr parent="B"> 190 <td>5</td> 191 <td>B-01</td> 192 <td>02/12/1982</td> 193 <td>19</td> 194 <td>3000.20</td> 195 </tr> 196 <tr parent="B"> 197 <td>6</td> 198 <td>B-02</td> 199 <td>03/12/1982</td> 200 <td>20</td> 201 <td>3000.30</td> 202 </tr> 203 <tr group="C"> 204 <td>7</td> 205 <td><a href="#" onclick="showSub(this)">Group-C</a></td> 206 <td>10/14/1980</td> 207 <td>8</td> 208 <td>1000.30</td> 209 </tr> 210 <tr parent="C"> 211 <td>8</td> 212 <td>C-01</td> 213 <td>03/12/1981</td> 214 <td>17</td> 215 <td>3100.30</td> 216 </tr> 217 </tbody> 218 </table> 219 </body> 220 </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
