jQuery实现带分组数据的Table表头排序实例分析


Posted in Javascript onNovember 24, 2015

本文实例讲述了jQuery实现带分组数据的Table表头排序。分享给大家供大家参考,具体如下:

如下图:

jQuery实现带分组数据的Table表头排序实例分析

jQuery实现带分组数据的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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
详谈js模块化规范
Jul 07 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 #Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 #Javascript
基于jquery实现日历签到功能
Sep 11 #Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 #Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 #Javascript
JS实现图片高亮展示效果实例
Nov 24 #Javascript
JS截取字符串实例详解
Nov 24 #Javascript
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php compact 通过变量创建数组
2016/11/15 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
javascript轮播图算法
2016/10/21 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python PO设计模式的具体使用
2019/08/16 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python实现登录与注册系统
2020/11/30 Python
中国电视购物:快乐购
2017/02/04 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
小学生环保标语
2014/06/13 职场文书
总经理致辞
2015/07/29 职场文书
幼儿园大班教学反思
2016/03/02 职场文书