javascript: 带分组数据的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="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表头排序的更多相关文章
- ElementUI - Table 表头排序
ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...
- HTML table表头排序箭头绘制法【不用箭头图片】
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序
目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- Lua table.sort排序
在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...
- Lua的 table.sort排序
在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...
- JS面试Q&A(续）：Javascript数组排序, 默认是字符串Unicode排序， 不适合数字
Q:下面代码段的执行后data里面的数据是什么?为什么? var data= [40,1,5,200] data.sort(); A: data的内容是[1, 200, 40, 5] 因为,Javas ...
- 原生js实现table的排序
原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...
随机推荐
- IT行业常见职位职业路线图
我曾经面试过一些计算机相关毕业的应届生,问他希望做什么工作时,他回答只要是软件开发就好了,再细问一下你了解到的软件开发是怎样的?除了软件开发,还有其它什么工作?就答不出来了. 这里我先给出一张IT知识 ...
- 自定义可视化调试工具（Microsoft.VisualStudio.DebuggerVisualizers）vs.net开发工具
背景: 话说:使用CYQ.Data时,会经常断点MDataTable的对象,为了查看表格的数据内容,在监视里会常ToDataTable(),然后借可DataTable的可视化方式查看表格. 近日:心中 ...
- Asp.net MVC的Model Binder工作流程以及扩展方法(2) - Binder Attribute
上篇文章中分析了Custom Binder的弊端: 由于Custom Binder是和具体的类型相关,比如指定类型A由我们的Custom Binder解析,那么导致系统运行中的所有Action的访问参 ...
- 清理DBA_DATAPUMP_JOBS中的孤立数据泵作业
今天在重构数据库时(将表空间中的表.索引转移到其它表空间)时,发现有两个奇怪的对象SYS_EXPORT_FULL_01.SYS_EXPORT_FULL_02搜索了一下,发现这个可能是EXPDP导出异常 ...
- 挖一挖C#中那些我们不常用的东西之系列（2）——IsXXX 系列方法
不知道有人做没做过对日外包,如果做过的话,那么对vb.net应该非常熟悉了,当年我刚毕业的时候也做过四个月的外包,那种日子简直 不是人过的,就连大楼下面买珠宝的阿姨都说,这些孩子,只看过他们上班,就没 ...
- 【JavaScript】EasyUI框架的Dialog控件根据浏览器分辨率自动调节宽高
序: 如果单独一个或几个Dialog控件修改成根据浏览器可视界面自动调整高.宽很容易仅仅是一个量变的过程,但如果大量页面都引入了Dialog控件,修改起来是一个很消耗体力的工作.所以接到任务后第一想法 ...
- Servlet/JSP-07 Session应用
Session应用 一. 避免表单重复提交 1. 表单重复提交的情况 ①在表单提交到一个 Servlet,而 Servlet 又通过请求转发的方式响应了一个 JSP 或者 HTML 页面,此时浏览器地 ...
- nice
我们在使用$top的时候有一列NI参数,这个参数就是进程的nice值,用来表示进程在系统调度中的优先级,Linux中的进程nice从-20到+19,越小表明调度的优先级越高,用户进程的最小nice值就 ...
- andriod 动态设置TextView 和 RelativeLayou 高度
XML布局 <RelativeLayout android:id="@+id/rlay_meeting_contact_context" android:layout_wid ...
- 初涉Linux ----------> 打造自己的 Vim IDE
一. 开篇前言 (图片显示越界的话,请刷新) 装好Ubuntu15.04系统之后呢,玩了玩 Ubuntu,感觉还是很不错的.比windows快,一开机就可以打开你想要的程序,但是在windows下你 ...