jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序?qū)嵗治?/h1>
更新時(shí)間:2015年11月24日 12:27:22 作者:Jimmy.Yang
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery針對表頭的操作及元素遍歷排序相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序。分享給大家供大家參考,具體如下:
如下圖:


要求:點(diǎn)擊表頭排序時(shí),"分組"及"分組明細(xì)"的數(shù)據(jù)層次關(guān)系不變
從網(wǎng)上找了一段常規(guī)的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對應(yīng)的列顯示數(shù)據(jù)的數(shù)據(jù)類型
function sortAble(th, tableId, iCol, dataType) {
var ascChar = "▲";
var descChar = "▼";
var table = document.getElementById(tableId);
//排序標(biāo)題加背景色
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;
//將得到的行放入數(shù)組,備用
for (var i = 0; i < colRows.length; i++) {
//注:如果要求“分組明細(xì)不參與排序”,把下面的注釋去掉即可
//if ($(colRows[i]).attr("group") != undefined) {
aTrs.push(colRows[i]);
//}
}
//判斷上一次排列的列和現(xiàn)在需要排列的是否同一個(gè)。
var thCol = $(table.tHead.rows[0].cells[iCol]);
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
//如果不是同一列,使用數(shù)組的sort方法,傳進(jìn)排序函數(shù)
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;
//給排序標(biāo)題加“升序、降序” 小圖標(biāo)顯示
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]));
}
}
//將列的類型轉(zhuǎn)化成相應(yīng)的可以排列的數(shù)據(jù)類型
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();
}
}
//排序函數(shù),iCol表示列索引,dataType表示該列的數(shù)據(jù)類型
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標(biāo)簽
function removeHtmlTag(html) {
return html.replace(/<[^>]+>/g, "");
}
//jQuery加載完以后,分組行高亮背景,分組明細(xì)隱藏
$(document).ready(function () {
$("tr[group]").css("background-color", "#ff9");
$("tr[parent]").hide();
});
//點(diǎn)擊分組行時(shí),切換分組明細(xì)的顯示/隱藏
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程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- jquery實(shí)現(xiàn)的table排序功能示例
- jQuery html表格排序插件tablesorter使用方法詳解
- jQuery排序插件tableSorter使用方法
- jQuery利用sort對DOM元素進(jìn)行排序操作
- javascript實(shí)現(xiàn)對表格元素進(jìn)行排序操作
- 針對后臺列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
- jquery對table做排序操作的實(shí)例演示
相關(guān)文章
-
使用jQuery實(shí)現(xiàn)更改默認(rèn)alert框體
本文給大家介紹的是如何使用jquery 改寫Alert彈出框樣式,十分的實(shí)用,這里推薦給大家,有需要的小伙伴可以參考下。 2015-04-04
-
通過JQuery,JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊
這篇文章主要介紹了通過JQuery,JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下 2019-06-06
-
jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案
這篇文章主要介紹了jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案,需要的朋友可以參考下 2018-05-05
-
jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的實(shí)例代碼
在使用MVC時(shí),向服務(wù)器端發(fā)送POST請求時(shí)有時(shí)需要傳遞數(shù)組作為參數(shù)值,下面通過實(shí)例代碼給大家介紹jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的方法,一起看看吧 2017-09-09
-
jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果,通過簡單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下 2015-09-09
-
jQuery EasyUI API 中文文檔 - ComboTree組合樹
jQuery EasyUI API 中文文檔 - ComboTree組合樹,需要的朋友可以參考下。 2011-10-10
-
jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
不論鼠標(biāo)指針離開被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開被選元素時(shí),才會(huì)觸發(fā) mouseleave 事件 2012-02-02
-
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果,感興趣的朋友可以參考下哈,希望對大家有所幫助 2013-07-07
-
jquery.idTabs 選項(xiàng)卡使用示例代碼
idTabs是基于Jquery編寫封裝的一個(gè)插件,主要用于實(shí)現(xiàn)選項(xiàng)卡功能,下面是它的具體使用 2014-09-09
-
jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動(dòng)態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下 2016-01-01
最新評論
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序。分享給大家供大家參考,具體如下:
如下圖:
要求:點(diǎn)擊表頭排序時(shí),"分組"及"分組明細(xì)"的數(shù)據(jù)層次關(guān)系不變
從網(wǎng)上找了一段常規(guī)的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對應(yīng)的列顯示數(shù)據(jù)的數(shù)據(jù)類型 function sortAble(th, tableId, iCol, dataType) { var ascChar = "▲"; var descChar = "▼"; var table = document.getElementById(tableId); //排序標(biāo)題加背景色 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; //將得到的行放入數(shù)組,備用 for (var i = 0; i < colRows.length; i++) { //注:如果要求“分組明細(xì)不參與排序”,把下面的注釋去掉即可 //if ($(colRows[i]).attr("group") != undefined) { aTrs.push(colRows[i]); //} } //判斷上一次排列的列和現(xiàn)在需要排列的是否同一個(gè)。 var thCol = $(table.tHead.rows[0].cells[iCol]); if (table.sortCol == iCol) { aTrs.reverse(); } else { //如果不是同一列,使用數(shù)組的sort方法,傳進(jìn)排序函數(shù) 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; //給排序標(biāo)題加“升序、降序” 小圖標(biāo)顯示 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])); } } //將列的類型轉(zhuǎn)化成相應(yīng)的可以排列的數(shù)據(jù)類型 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(); } } //排序函數(shù),iCol表示列索引,dataType表示該列的數(shù)據(jù)類型 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標(biāo)簽 function removeHtmlTag(html) { return html.replace(/<[^>]+>/g, ""); } //jQuery加載完以后,分組行高亮背景,分組明細(xì)隱藏 $(document).ready(function () { $("tr[group]").css("background-color", "#ff9"); $("tr[parent]").hide(); }); //點(diǎn)擊分組行時(shí),切換分組明細(xì)的顯示/隱藏 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程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)的table排序功能示例
- jQuery html表格排序插件tablesorter使用方法詳解
- jQuery排序插件tableSorter使用方法
- jQuery利用sort對DOM元素進(jìn)行排序操作
- javascript實(shí)現(xiàn)對表格元素進(jìn)行排序操作
- 針對后臺列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
- jquery對table做排序操作的實(shí)例演示
相關(guān)文章
使用jQuery實(shí)現(xiàn)更改默認(rèn)alert框體
本文給大家介紹的是如何使用jquery 改寫Alert彈出框樣式,十分的實(shí)用,這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04通過JQuery,JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊
這篇文章主要介紹了通過JQuery,JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案
這篇文章主要介紹了jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案,需要的朋友可以參考下2018-05-05jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的實(shí)例代碼
在使用MVC時(shí),向服務(wù)器端發(fā)送POST請求時(shí)有時(shí)需要傳遞數(shù)組作為參數(shù)值,下面通過實(shí)例代碼給大家介紹jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的方法,一起看看吧2017-09-09jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果,通過簡單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09jQuery EasyUI API 中文文檔 - ComboTree組合樹
jQuery EasyUI API 中文文檔 - ComboTree組合樹,需要的朋友可以參考下。2011-10-10jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
不論鼠標(biāo)指針離開被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開被選元素時(shí),才會(huì)觸發(fā) mouseleave 事件2012-02-02jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07jquery.idTabs 選項(xiàng)卡使用示例代碼
idTabs是基于Jquery編寫封裝的一個(gè)插件,主要用于實(shí)現(xiàn)選項(xiàng)卡功能,下面是它的具體使用2014-09-09jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動(dòng)態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01