首页 > 代码库 > javascript: 带分组数据的Table表头排序
javascript: 带分组数据的Table表头排序
如下图：
要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变
从网上找了一段常规的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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。