Tablesorter, сортировка подгруппы - PullRequest
Новая
       5

Tablesorter, сортировка подгруппы

6 голосов
/ 22 августа 2011

Я попытался создать виджет, который может сортировать группу строк отдельно внутри таблицы и в то же время заставлять группу строк придерживаться «сгруппированных строк».Я не могу понять, как решить эту проблему ...

РЕДАКТИРОВАТЬ: Я хочу сортировать по столбцам без colspan.каждая группа должна вести себя как дополнительная таблица

Базовая настройка в jsfiddle, может ли кто-нибудь подтолкнуть меня в нужном направлении?

РЕДАКТИРОВАТЬ: новый jsfiddle http://jsfiddle.net/L8bwW/28/

1 Ответ

4 голосов
/ 22 августа 2011

Вот Рабочий пример , который не использует tableorter.

Ключ должен использовать элемент 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 для нее может выглядеть так: 

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

      });
  }
...