点击表头排序时，"分组"及"分组明细"的数据层次关系不变

最新推荐文章于 2023-10-09 15:20:47 发布

IT小白007

最新推荐文章于 2023-10-09 15:20:47 发布

阅读量255

点赞数 1

文章标签： JavaScript html

要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变

从网上找了一段常规的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="http://lib.sinaapp.com/js/jquery/1.7.2/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>

IT小白007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击表头排序时，"分组"及"分组明细"的数据层次关系不变

要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变从网上找了一段常规的table排序，改了改，以满足“分组支持”，贴在这里备份 1 DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
复制链接

扫一扫