高分悬赏!如何在EXCEL里分组排序!

发布网友发布时间：2022-04-24 08:09

共5个回答

懂视网时间：2022-05-15 08:16

这次给大家带来实现带分组数据Table表头排序功能，实现带分组数据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="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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！