Tablesorter，子组排序 [英] Tablesorter, sub group sorting

问题描述

我试图制作一个小部件，它可以在一个表内单独排序一组行，同时使行组坚持分组行。我无法弄清楚如何解决这个问题......

I've tried to make a widget that can sort a group of rows separately inside a table and at the same time make the row-group to stick with "grouped rows". I can't figure out how to approach this problem ...

编辑：我想对非colspan列进行排序。每个组都应该表现为子表

I want to sort on the non colspan columns. every group should behave as a sub-table

jsfiddle中的基本设置，有人能推动我朝着正确的方向发展吗？

Basic setup in jsfiddle, can anyone push me in the right direction ?

编辑：新jsfiddle http://jsfiddle.net/L8bwW/28/

new jsfiddle http://jsfiddle.net/L8bwW/28/

推荐答案

这是工作示例不使用tablesorter。

Here is a Working example that does not use tablesorter.

关键是使用 tbody 元素对行进行分组。然后在每个tbody中排序除最后一行之外的所有行。

The key is to use the tbody element to group your rows. Then sort all rows but the last, within each tbody.

表格可能如下所示：

  <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>
     ...

它的排序fn可能如下所示：

And a sort fn for it might look like this:

  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'); }

      });
  }

这篇关于Tablesorter，子组排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！