實現帶分組數據Table表頭排序功能

來源：懂視網責編：小采時間：2020-11-27 19:51:52

實現帶分組數據Table表頭排序功能

實現帶分組數據Table表頭排序功能:這次給大家帶來實現帶分組數據Table表頭排序功能，實現帶分組數據Table表頭排序功能的注意事項有哪些，下面就是實戰案例，一起來看一下。如下圖：要求：點擊表頭排序時，"分組"及"分組明細"的數據層次關系不變從網上找了一段常規的tab

推薦度：

點擊下載本文 文檔為doc格式

導讀實現帶分組數據Table表頭排序功能:這次給大家帶來實現帶分組數據Table表頭排序功能，實現帶分組數據Table表頭排序功能的注意事項有哪些，下面就是實戰案例，一起來看一下。如下圖：要求：點擊表頭排序時，"分組"及"分組明細"的數據層次關系不變從網上找了一段常規的tab

這次給大家帶來實現帶分組數據Table表頭排序功能，實現帶分組數據Table表頭排序功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

如下圖：

要求：點擊表頭排序時，"分組"及"分組明細"的數據層次關系不變

從網上找了一段常規的table排序，改了改，以滿足“分組支持”，貼在這里備份

<!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>

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

實現帶分組數據Table表頭排序功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：分組數據數據排序

熱門焦點

實現帶分組數據Table表頭排序功能

實現帶分組數據Table表頭排序功能

實現帶分組數據Table表頭排序功能

最新推薦

猜你喜歡

熱門推薦