如下图:

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

从网上找了一段常规的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>

javascript: 带分组数据的Table表头排序的更多相关文章

  1. ElementUI - Table 表头排序

    ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...

  2. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  3. Lua table.sort排序

    在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...

  4. Lua的 table.sort排序

    在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...

  5. JS面试Q&amp;A(续):Javascript数组排序, 默认是字符串Unicode排序, 不适合数字

    Q:下面代码段的执行后data里面的数据是什么?为什么? var data= [40,1,5,200] data.sort(); A: data的内容是[1, 200, 40, 5] 因为,Javas ...

  6. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  7. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  8. CList 点击表头排序 (3)两种排序的第二种

    在头两篇中介绍了CListCtrl::SortItems() 方法的使用和其中的一个排序方法,这篇介绍另一种方法 CList 点击表头排序 (1)SortItems函数 CList 点击表头排序 (2 ...

  9. CList 点击表头排序 (2)两种排序方法中其中一种

    上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...

随机推荐

  1. 浅谈 jQuery 事件源码定位问题

    该方法已过期,chrome 48还是49开始,自带各种流行框架的事件绑定解析. 勾上这个选项即可. 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到 ...

  2. jquery_easyui 相关问题

    1. datagrid点击title,无法进行客户端排序. 增加属性 data-options="singleSelect:true,collapsible:true,url:'/ViewS ...

  3. POJ 3321 Apple Tree(DFS序+线段树单点修改区间查询)

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 25904   Accepted: 7682 Descr ...

  4. POJ 1202 Family 概率,DP,高精 难度:2

    http://poj.org/problem?id=1202 难度集中在输出格式上,因为输出格式所以是高精度 递推式: 血缘肯定只有从双亲传到儿子的,所以,设f,m为双亲,son为儿子,p[i][j] ...

  5. CCS 5 XDS100 仿真连接错误Error connecting to the target【瓦特芯笔记】

      问题现象:在点击仿真是出现连接错误: Error connecting to the target: (Error -151 @ 0x0) One of the FTDI driver funct ...

  6. 监控 DNS 流量,预防安全隐患五大招!

    尽管 IT 管理员尽心尽责地监控设备.主机和网络是否存在恶意活动的迹象,却往往出力不讨好.主机入侵检测和端点保护对很多公司来说可能是"必需"的安全措施,但如果要找出 RAT.roo ...

  7. iframe与父页面的js通信

    1.父页面调用iframe中的函数: document.getElementById('myframe').contentWidow.fun1(); 2.在iframe中调用父页面中的函数: wind ...

  8. 搜索引擎之全文搜索算法功能实现(基于Lucene)

    之前做去转盘网的时候,我已经公开了非全文搜索的代码,需要的朋友希望能够前去阅读我的博客.本文主要讨论如何进行全文搜索,由于本人花了很长时间设计了新作:观点,观点对全文搜索的要求还是很高的,所以我又花了 ...

  9. easyUI使用dailog实现弹出框带表单功能

    本文为博主原创,未经允许不得转载: 示例如下: 需要注意的地方在id为win的div中需要有:closed="true"这个属性,这个属性为控制dailogn对话框显示与隐藏的属性 ...

  10. mysql之filesort原理

    在执行计划中,可能经常看到有Extra列有filesort,这就是使用了文件排序,这当然是不好的,应该优化,但是,了解一下他排序的原理也许很有帮助,下面看一下filesort的过程: 1.根据表的索引 ...