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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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
关于php mvc开发模式的感想
2011/06/28 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
python中函数传参详解
2016/07/03 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
pandas中的series数据类型详解
2019/07/06 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python 基于opencv操作摄像头
2020/12/24 Python
校园歌手大赛策划书
2014/01/17 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
运动会拉拉队口号
2014/06/09 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
三方股份合作协议书
2014/10/13 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Python 数据可视化之Seaborn详解
2021/11/02 Python