jQuery 数据表 rowGroup 折叠/展开

Question

我正在使用 jQuery Datatables，我想将行分组合并到表中。

我尝试通过添加行和单击事件处理程序来展开/折叠属于该行组的行来自行合并它。这依赖于切换行的可见性，这可以工作，但很困惑。

我在这里遇到了一个大表的问题，其中大多数行都不在 DOM 中，直到滚动事件调用drawCallback，因此当我为行提供特定的类以将它们与行组关联时，这些类在每次滚动时都会被删除表的。

Datatables 建议使用我目前已合并到表中的 rowGroup 扩展。 https://datatables.net/extensions/rowgroup/

此扩展程序没有展开或折叠组的选项，是否有人有操作此扩展程序以添加展开/折叠功能的经验？

我尝试覆盖$.fn.dataTable.ext.search.push来模拟一个不会绘制某些行的“过滤器”，这是我可以做到的。这里的问题是，我无法决定此方法中哪一行是要绘制的 rowGroup 行，因此所有 rowGroup 行都被删除。

有人有幸使用 rowGroup 扩展扩展/折叠组吗？

Answer 1

首先添加一个状态来跟踪折叠的组:

 var collapsedGroups = {};

接下来，将其添加到数据表初始化中以启用 rowGroup 插件。它的工作原理是检查collapapsedGroups，然后检查此信息来隐藏或显示行。它还添加了一个 css-class 来指示它是否折叠:

 {
    rowGroup: {
        // Uses the 'row group' plugin
        dataSrc: 'product.category',
        startRender: function (rows, group) {
            var collapsed = !!collapsedGroups[group];

            rows.nodes().each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });    

            // Add category name to the <tr>. NOTE: Hardcoded colspan
            return $('<tr/>')
                .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
        }
  }

最后，添加一个处理程序，用于单击行以折叠/展开行。这会导致表格重绘，进而调用上面的 startRender:

   $tbody.on('click', 'tr.group-start', function () {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw();
    });

Here是一个工作示例。