jQuery 数据表 rowGroup 折叠/展开

Question

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

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

我在这里遇到了大型表的问题，在滚动事件调用 drawCallback 之前，大多数行都不在 DOM 中，因此当我为行指定某个类以将它们与行组相关联时，每次滚动都会删除这些类的表。

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

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

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

有没有人幸运地使用 rowGroup 扩展来扩展/折叠组？

Answer 1

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

 var collapsedGroups = {};

接下来，将此添加到 Datatable 初始化以启用 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 是一个工作示例。

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

Answer 3

我找到了自己的答案，所以如果其他人将来对此有问题，我想分享它。

使用以下代码实现行分组，其中 index 是您要分组的列索引：

var dataSrc = g_oTable.columns(index).dataSrc();

g_oTable.order([index, "asc"]).draw();
g_oTable.order.fixed({
    pre: [ index, 'asc' ]
}).draw();

g_oTable.rowGroup().dataSrc(dataSrc[0]);
g_oTable.rowGroup().enable().draw();

$('.group').each(function(i, obj) {
    $(obj).nextUntil('tr.group').each(function(i) {
        $(this).toggle();
    });
});
g_oTable.draw();

然后将点击事件处理程序添加到您的行组：

$( document ).on("click", "tr.group", function(){
    $(this).nextUntil('tr.group').toggle();
});

Answer 4

我的快速而肮脏的解决方案是这样的......

$('.group').click(function() {
    //$(this+" .group_date .date_arrow").addClass("rotateSVG");
    var nextItem = $(this).next('tr');
    while(nextItem.attr('class') != 'group') {
        nextItem.fadeToggle();
        if(nextItem.next('tr').length == 0) {
            break;
        }
        nextItem = nextItem.next('tr');
    }
});