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>

 

posted @ 2014-08-11 15:47  菩提树下的杨过  阅读(7664)  评论(2)  编辑  收藏  举报