代码之家 › 专栏 › 技术社区 › Alana Storm

使用客户端HTML表排序对行进行分组

html jquery javascript

Alana Storm · 技术社区 · 14 年前

是否有任何现有的表排序库,或者是否有配置的方法 tablesorter ,每两行排序一次?另外,是否有更好的方法来语义地表示我的表,以便标准的行排序可以工作。

我有一个HTML表,看起来像这样

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some Data: 1</td>
            <td>Some More Data:1 </td>
        </tr>
        <tr>
            <td colspan="2">Some text about the above data that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td>
        </tr>

        <tr>
            <td>Some Data: 2</td>
            <td>Some More Data: 2</td>
        </tr>
        <tr>
            <td colspan="2">Some text about the above data 2 set that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td>
        </tr>           

    </tbody>
</table>

我正在寻找一种方法来对表进行排序,使表按数据行排序, 但是带有colspan的行与它的数据一起传输,不单独排序。

2 回复 | 直到 14 年前

pbarney 14 年前

有人开发了这一功能用于桌面分拣机。查看此页面:

http://blog.pengoworks.com/index.cfm/2008/3/28/Finished-jQuery-Tablesorter-mod-for-Collapsible-Table-Rows

您所需要做的就是给第二行一个“展开子行”类(这是可配置的)。

做你所需要的。

Jonny Buchanan 14 年前

唯一可用于逻辑(不一定是语义)分组相关行的元素是 <tbody> ,因为有多个是有效的 <TSBOR> 元素。但是,在这种情况下,这对您没有任何帮助,因为实现了TableSorter。

我可以在TableSorter源代码中看到一个未记录的配置选项- appender -它允许您指定一个函数,该函数接受要排序的表,以及一个包含要附加到表上的已排序行的数据结构,以实现所需的重新排序,但是我看不到任何选项,这些选项允许您配置在进行排序时查看哪些行。

如果问题的第一部分在那里,您可以使用它来限制用于排序的行与实际数据行,并使用 附属物 选项提供一个函数,该函数附加每个已排序行及其下一个同级行。

编辑: 下面是您需要的额外部分的快速而讨厌的实现,以及一个使用示例:

修改 buildCache 方法,从第195行到jquery.tablesorter.js:

var rowsToSort = table.config.rowsToSort ? table.config.rowsToSort(table) : table.tBodies[0].rows;
var totalRows = rowsToSort.length,
    totalCells = (rowsToSort[0] && rowsToSort[0].cells.length) || 0,
    parsers = table.config.parsers,
    cache = {row: [], normalized: []};

适用于示例表的用法:

$(document).ready(function() {
    $.tablesorter.defaults.debug = true;

    // Select every other row as sorting criteria
    $.tablesorter.defaults.rowsToSort = function(table)
    {
      var rows = [];
      var allRows = table.tBodies[0].rows;
      for (var i = 0, l = allRows.length; i < l; i += 2)
      {
        rows.push(allRows[i]);
      }
      return rows;
    };

    // Append each row and its next sibling row
    $.tablesorter.defaults.appender = function (table, rows)
    {
      for (var i = 0, l = rows.length; i < l; i++)
      {
        var row = rows[i][0];
        var buddyRow = $(row).next("tr").get(0);
        table.tBodies[0].appendChild(row);
        table.tBodies[0].appendChild(buddyRow);
      }
    };

    $("table").tablesorter();
});