首页 / JAVASCRIPT / 实现带分组数据Table表头排序功能

实现带分组数据Table表头排序功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了实现带分组数据Table表头排序功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5119字，纯文字阅读大概需要8分钟。

内容图文

这次给大家带来实现带分组数据Table表头排序功能，实现带分组数据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表头排序功能全部内容，希望文章能够帮你解决实现带分组数据Table表头排序功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/291433.html

来源：【匿名】

【上一篇】怎样局部更新Razor页面【下一篇】javascript 怎么调用php方法

更多 ►

【实现带分组数据Table表头排序功能】教程文章相关的互联网学习教程文章

[Javascript] Modifying an Immutable.js Map()【代码】

We will now look at five methods that modify an Immutable.Map().setupdatedeleteclearmerge//set()var map = Immutable.Map(); var todo = {id: +new Date(),name: "todo1",content: "learning Immutable" } map = map.set(todo.id, todo); var task = map.get(todo.id); console.log(task.content); //"learning Immutable"//updatevar map = Immutable.Map(); var todo = {id: +new Date(),name: "todo1",content: "learning...

js的传值，table中tr的遍历，js中动态创建数组

1、这里关键是对页面中的传值，其次是动态的创建一个数组，用来存值$(val).css("background-color", "rgb(251, 248, 233)");//取消选中var ary;if (crival_number.indexOf(fnumber) > 0) {var fnumbers = crival_number.split(",");//然后做的操作便是从crival_number中去掉相对应的numberary = new Array(fnumbers.length);for (var i = 0, j = 0; i < fnumbers.length; i++, j++) {if (fnumbers[i] != fnumber) {ary[j] = fnumbe...

Chrome-逆向分析JS-2获取发送请求位置（以datatables获取表格数据为例）

剧透：就是使用了一下Chrome Source的XHR/fetch Breakpoints 功能，在发送请求时在该行进入断点调试。# 一：不认识一下XHR/fetch Breakpoints 这个功能么？可以去 https://developers.google.com/web/tools/chrome-devtools/ 这里找找，但一般人都打不开，我在这里大概说一下。1. 勾上Any XHR or fetch就能在发送任何请求时在该行进入断点调试 2. 同时点右上角的加号或右键选择 Add breakpoints ，输入一个字符串，在URL包含该字符...

js对Table表格的操作【代码】

js对Table表格的操作对于表格 Table javascript也提供了一些操作方法oTable.tHead 获取表格里面 tHead的元素oTable.tBodies 获取表格里面正文的元素oTable.tFoot 获取表格里面的底部元素rows 行cells 列示例如下:<script language="javascript">window.onload=function(){var oTable=document.getElementById("oTable");//获取页上面的表格对象//打印正文->第二行->第三列的数据console.log( oTable.oTable.tBodies[...

js实现哈希表（HashTable）【代码】【图】

在算法中，尤其是有关数组的算法中，哈希表的使用可以很好的解决问题，所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子。第一部分：相关知识点属性的枚举:var person = {name: "zzw",sex: "Male",age: 21};for (var prop in person) {console.log(prop + "",person[prop]);}输出：即对于对象而言，我们可以使用for in来枚举对象的属性。属性的删除：var person = {name: "zzw",sex: "Male",age: 21};var ifRemov...

JS与jQuery遍历Table所有单元格内容的方法_javascript技巧

本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法。分享给大家供大家参考，具体如下：用JS去遍历Table的所有单元格中的内容，可以用如下JS代码实现：function GetInfoFromTable(tableid) {var tableInfo = "";var tableObj = document.getElementById(tableid);for (var i = 0; i 这个方法的参数是唯一标识Table的id，用document对象的获取 jQuery 遍历Table中tr中的td中的内容： 1、$("#trID td").text()得到的是一个所以...

layui 对table中的数据进行转义的实例

方法一通过done回调进行遍历： //方法级渲染table.render({id: demoList,elem: #demoList, url: showDemoList, cols: [[{checkbox: true, fixed: true, width: 10%}, {field: id, title: 编号, width: 15%, sort: true}, {field: pipe_id, title: 机构ID, width: 15%}, {field: bank_id, title: 银行ID, width: 10%}, {field: pipe_cost, title: 成本, width: 10%}, {field: status, title: 状态, width: 20%}, {field: remark, t...

iview table render集成switch开关的实例【图】

今天想要分享的是iview table render集成switch开关修改table表格的值，看文档记得看2.0的，不注意打开就成1.0然后用上了一直没有效果又没有找出原因。给出的只是一种写法思路，具体自己集成。一、效果如下即是打开处理switch开关，对应修改为已处理状态，关闭switch开关，修改为未处理状态。二、template html写法 <span style="font-size:14px;"><Table highlight-row border :columns="columns1" :data="data1" ref="table" :...

jquery获取table指定行和列的数据方法(当前选中行、列)

实例如下： //不多说，直接上代码。 $("table tr").click(function() {//为表格的行添加点击事件var tr = $(this);//找到tr原色var td = tr.find("td");//找到td元素alert(td[0].innerHTML);//指定下标即可})今日项目中需要用到取table选中列的数据，网上资料发现都不能获取到选中指定列的数据，通过分析测试后总结出以上代码，可以获取选中行/列的数据。取td的数据不是.val()，也不是.html()。经过多次测试才发现是通过innerHTML(...

jQuery遍历Table应用示例_jquery

代码如下: function checkwo(){ var vales = ""; $("#vales").val(vales); var flag = false; var bo = true; $("#data_table").find("tr").each(function(){ $(this).find("td input").each(function(){ if($(this).attr("name")=="rid") { vales+=$(this).val()+"&"; } if($(this).attr("name")=="qty") { var qty = $(this).val(); if(qty<0) { alert("实盘数量不能为负数"); bo = false; return; } if(qty>0) { flag = true; }...

layui-table表复选框勾选的所有行数据获取的例子【图】

项目需求，可以用复选框勾选项目进行提交，如下表 <table class="layui-table" lay-data="{url:******, id:test3}" lay-filter="test3"><thead><tr><th lay-data="{type:checkbox}">ID</th><th lay-data="{field:id, width:80}">ID</th><th lay-data="{field:t1}">测试项</th><th lay-data="{field:t2, edit: text}">标定参数</th><th lay-data="{field:t3}">标定值</th></tr></thead> </table>我们已经获取到了表中所有行的数据，...

怎么使用jQuery选中并且操作table【图】

这次给大家带来怎么使用jQuery选中并且操作table，使用jQuery选中并且操作table的注意事项有哪些，下面就是实战案例，一起来看一下。比较表格的内容。判断是否合并单元格：tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格，需要存储两个参数， * 1，开始合并的单元格的第一行的行数， * 2.要合并的单元格的个数 **/ console.log(tr); //...

javascript – TypeScript：IFrame沙箱属性未定义,DOMSettableTokenList没有构造函数【代码】

我在类型脚本中创建一个iFrame元素：var iFrameElement : HTMLIFrameElement = document.createElement("iframe"); iFrameElement.sandbox.add('allow-forms'); iFrameElement.sandbox.add('allow-scripts'); iFrameElement.sandbox.add('allow-same-origin');但是,sandbox属性未定义,因此add(value：string)此处失败. 我无法弄清楚如何实例化sandbox属性,这里是lib.d.ts中定义的接口：interface HTMLIFrameElement {sandbox: DOM...

layui的table如何做批量删除【图】

layui的table做批量删除实现代码如下：// 批量删除功能// 1.得到table选中行内容// 2.得到删除需要的唯一值，一般是id;// 3.将所要删除的项加入到数组中；// 4.判断是否选中；// 5.发送ajax请求，并附带参数id；var $=layui.$,active={deLink:function () {var checkStatus=table.checkStatus(idTest),data=checkStatus.data,deList=[];data.forEach(function(n,i){delList.push(n.id);});if(delList!=){layer.comfirm(确定删除所选...

javascript-handsontable怎么让某一行设置为不可编辑

$("#handtable").handsontable("setDataAtCell",i,5,'添加成功');我这边点按钮提交符合要求的行不可编辑应该怎么弄啊还有怎么给添加成功上字体颜色样式呢回复内容：$("#handtable").handsontable("setDataAtCell",i,5,添加成功);我这边点按钮提交符合要求的行不可编辑应该怎么弄啊还有怎么给添加成功上字体颜色样式呢

首页 / JAVASCRIPT / 实现带分组数据Table表头排序功能

实现带分组数据Table表头排序功能

内容导读

内容图文

内容总结

内容备注

内容手机端

【实现带分组数据Table表头排序功能】教程文章相关的互联网学习教程文章

TABLE - 相关标签

分组 - 相关标签

功能 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程