javascript: 带分组数据的Table表头排序
标签：
JavaScript
如下图：
要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变
从网上找了一段常规的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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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) {1
11 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>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦