jQuery实现带分组数据的Table表头排序实例分析

时间：2021-05-26

本文实例讲述了jQuery实现带分组数据的Table表头排序。分享给大家供大家参考，具体如下：

如下图：

要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变

从网上找了一段常规的table排序，改了改，以满足“分组支持”，贴在这里备份

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://pareEle(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>

希望本文所述对大家jQuery程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章