jQuery Datatables rowGroup折叠/展开

Question

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

我试图通过添加行和单击事件处理程序来自己合并它以展开/折叠与该行组相关的行.这依赖于切换行的可见性,这可行但是很麻烦.

我有一个大型表的问题,其中大多数行都不在DOM中,直到scroll事件调用drawCallback,所以当我给行一个特定的类将它们与一个行组关联时,这些类在表的每个滚动上都被删除了.

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

此扩展程序无法扩展或折叠组,是否有人有任何操作此扩展程序以添加展开/折叠功能的经验？

我试图覆盖$.fn.dataTable.ext.search.push以模拟不会绘制某些行的"过滤器",我可以这样做.这里的问题是我无法确定哪个行是此方法中的rowGroup行来绘制,因此删除了所有rowGroup行.

有没有人有使用rowGroup扩展扩展/折叠组的运气？

Answer 1

首先添加状态以跟踪折叠组:

 var collapsedGroups = {};

接下来,将其添加到Datatable初始化以启用rowGroup插件.它通过检查collapapsedGroups然后此信息来隐藏或显示行.它还添加了一个css类,指示它是否已折叠:

 {
    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();
    });

Answer 2

您还可以添加一个切换图标来指示折叠状态（使用字体真棒）：

startRender: function (rows, group) {
    var collapsed = !!collapsedGroups[group];

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

    var toggleClass = collapsed ? 'fa-plus-square' : 'fa-minus-square';

    // Add group name to <tr>
    return $('<tr/>')
        .append('<td colspan="' + rows.columns()[0].length +'">' + '<span class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>')
        .attr('data-name', group)
        .toggleClass('collapsed', collapsed);
},