Javascript 表排序器,子组排序
我尝试制作一个小部件,它可以在一个表中对一组行分别进行排序,同时使行组与分组行保持一致。我不知道如何解决这个问题 编辑:我想对非colspan列进行排序。每个组都应该作为一个子表 在JSFIDLE中的基本设置,有人能把我推向正确的方向吗 编辑:新的JSFIDLE这里有一个不使用tablesorter的 关键是使用tbody元素对行进行分组。然后对每个tbody中除最后一行以外的所有行进行排序 该表可能如下所示:Javascript 表排序器,子组排序,javascript,jquery,tablesorter,Javascript,Jquery,Tablesorter,我尝试制作一个小部件,它可以在一个表中对一组行分别进行排序,同时使行组与分组行保持一致。我不知道如何解决这个问题 编辑:我想对非colspan列进行排序。每个组都应该作为一个子表 在JSFIDLE中的基本设置,有人能把我推向正确的方向吗 编辑:新的JSFIDLE这里有一个不使用tablesorter的 关键是使用tbody元素对行进行分组。然后对每个tbody中除最后一行以外的所有行进行排序 该表可能如下所示: <table class="sortable"> <t
<table class="sortable">
<thead>
<tr> <th></th> <th>A-head</th> <th>B-head</th> <th>C-head</th> </tr>
</thead>
<tfoot>
<tr> <td></td> <td>A-foot</td> <td>B-foot</td> <td>C-foot</td></tr>
</tfoot>
<tbody class='sortable'>
<tr> <td>DDD</td><td> r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr>
<tr> <td>AAA</td><td> r2c1</td> <td>r2c2</td> <td>r2c3</td> </tr>
<tr> <td>CCC</td><td> r3c1</td> <td>r3c2</td> <td>r3c3</td> </tr>
<tr> <td>BBB</td><td> r4c1</td> <td>r4c2</td> <td>r4c3</td> </tr>
<tr> <td colspan="4">summary info for the first group of rows</td> </tr>
</tbody>
<tbody class='sortable'>
<tr> <td>Zorro</td><td> r5c1</td> <td>r5c2</td> <td>r5c3</td> </tr>
<tr> <td>Caleb</td><td> r6c1</td> <td>r6c2</td> <td>r6c3</td> </tr>
<tr> <td>Momo</td><td> r7c1</td> <td>r7c2</td> <td>r7c3</td> </tr>
<tr> <td>Wolfie</td><td> r8c1</td> <td>r8c2</td> <td>r8c3</td> </tr>
<tr> <td colspan="4">summary info for rowgroup #2</td> </tr>
</tbody>
...
function SortIt() {
jQuery('table.sortable > tbody.sortable').each(function(index,tbody) {
var $rowGroup = jQuery(tbody);
// select all but the last row in the tbody
var rows = $rowGroup.find('tr:not(last-child)').get();
var sortDirection = $rowGroup.is('.sorted-asc') ? -1 : 1;
// Set a custom property on each row - 'sortKey', the key to sort.
// This example uses the text in the first column. It could use
// any column, or any content in the row.
jQuery.each(rows, function(index, row) {
row.sortKey = jQuery(row).children('td').first().text();
});
// actually sort the rows
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
// retain the summary row - the last one
var summaryRow = $rowGroup.find("tr:last-child");
// remove all the rows from the tbody
$rowGroup.find("tr").remove();
// append the rows in sorted order
jQuery.each(rows, function(index, row) {
$rowGroup.append(row);
row.sortKey = null;
});
// append the final row
$rowGroup.append(summaryRow);
if (sortDirection == 1) { $rowGroup.addClass('sorted-asc'); }
else {$rowGroup.removeClass('sorted-asc'); }
});
}
它的排序fn可能如下所示:
<table class="sortable">
<thead>
<tr> <th></th> <th>A-head</th> <th>B-head</th> <th>C-head</th> </tr>
</thead>
<tfoot>
<tr> <td></td> <td>A-foot</td> <td>B-foot</td> <td>C-foot</td></tr>
</tfoot>
<tbody class='sortable'>
<tr> <td>DDD</td><td> r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr>
<tr> <td>AAA</td><td> r2c1</td> <td>r2c2</td> <td>r2c3</td> </tr>
<tr> <td>CCC</td><td> r3c1</td> <td>r3c2</td> <td>r3c3</td> </tr>
<tr> <td>BBB</td><td> r4c1</td> <td>r4c2</td> <td>r4c3</td> </tr>
<tr> <td colspan="4">summary info for the first group of rows</td> </tr>
</tbody>
<tbody class='sortable'>
<tr> <td>Zorro</td><td> r5c1</td> <td>r5c2</td> <td>r5c3</td> </tr>
<tr> <td>Caleb</td><td> r6c1</td> <td>r6c2</td> <td>r6c3</td> </tr>
<tr> <td>Momo</td><td> r7c1</td> <td>r7c2</td> <td>r7c3</td> </tr>
<tr> <td>Wolfie</td><td> r8c1</td> <td>r8c2</td> <td>r8c3</td> </tr>
<tr> <td colspan="4">summary info for rowgroup #2</td> </tr>
</tbody>
...
function SortIt() {
jQuery('table.sortable > tbody.sortable').each(function(index,tbody) {
var $rowGroup = jQuery(tbody);
// select all but the last row in the tbody
var rows = $rowGroup.find('tr:not(last-child)').get();
var sortDirection = $rowGroup.is('.sorted-asc') ? -1 : 1;
// Set a custom property on each row - 'sortKey', the key to sort.
// This example uses the text in the first column. It could use
// any column, or any content in the row.
jQuery.each(rows, function(index, row) {
row.sortKey = jQuery(row).children('td').first().text();
});
// actually sort the rows
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
// retain the summary row - the last one
var summaryRow = $rowGroup.find("tr:last-child");
// remove all the rows from the tbody
$rowGroup.find("tr").remove();
// append the rows in sorted order
jQuery.each(rows, function(index, row) {
$rowGroup.append(row);
row.sortKey = null;
});
// append the final row
$rowGroup.append(summaryRow);
if (sortDirection == 1) { $rowGroup.addClass('sorted-asc'); }
else {$rowGroup.removeClass('sorted-asc'); }
});
}
您想如何进行排序?您希望它按宽行排序,然后按拆分行排序,就像Finder/Explorer按字母顺序在文件夹上排序,然后在子文件夹上排序一样吗?很抱歉,不清楚,我想按非colspan列排序。每个组都应该作为一个子表。宽colspan行是否附加到它们下面的单行?或者它们是否固定在适当的位置,例如,无论其他行如何排序,它们都显示为第三行和第六行?colspan行附加到它上面的行,并且不会每x索引重复一次。更新的JSFIDLE示例只是为了让您知道,我已经更新了我的fork of tablesorter,现在可以对包含多个tbodies的表进行排序。退房