html 表格分组显示数据,js带分组数据的Table表格排序,js表格排序

js表格排序 - 我爱模板网 www.5imoban.net

.tbl-list, .tbl-list td, .tbl-list th {

border: solid 1px #000;

border-collapse: collapse;

padding: 10px;

margin: 15px;

}

//排序 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();

}

序号

style="cursor:pointer">姓名

style="cursor:pointer">生日

style="cursor:pointer">年龄

style="cursor:pointer">工资

1 Group-A01/12/1982251000.502A-0101/09/1982252000.103A-0201/10/1982262000.204 Group-B10/14/1999181000.205B-0102/12/1982193000.206B-0203/12/1982203000.307 Group-C10/14/198081000.308C-0103/12/1981173100.30

提示：您可以先修改部分代码再运行