php生成0~1隨機小數的方法(必看)
749
2024-01-10
本文實例講述了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="http://www.gimoo.net/t/1904/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 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 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 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程序設計有所幫助。
