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

Answer 3

我的快速又肮脏的解决方案是这个...

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

Answer 4

我找到了自己的答案，所以如果其他人对此有任何疑问，我想分享一下。

使用以下代码实现行分组，其中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();

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

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

jQuery Datatables rowGroup折叠/展开

4 个答案: