jQuery Datatables 行分组 折叠/展开

Question

我正在使用jQuery Datatables，并希望将行分组功能整合到表格中。

我尝试添加行和点击事件处理程序来展开/折叠与该行组相关的行。这依赖于切换行的可见性，虽然有效但是比较凌乱。

我在大型表格中遇到了问题，因为大多数行直到滚动事件调用drawCallback才会出现在DOM中，所以当我给行分配一定的类别以将它们与行组关联时，这些类别会在每次滚动表格时被删除。

Datatables建议使用他们的rowGroup扩展，我已经将其整合到我的表格中。https://datatables.net/extensions/rowgroup/ 该扩展没有展开或折叠组的选项，是否有人有操作此扩展以添加展开/折叠功能的经验？

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

有人在使用rowGroup扩展时成功地展开/折叠分组吗？

- justinlav

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

这里 有一个可工作的示例。

- Martin Wickman

---

非常好！只需要稍作修改，在 table.draw() 中添加 false 参数，否则如果你在第三页展开/折叠一个分组，draw() 会将你带回第一页。以下是实现代码，供有需要的人参考：live.datatables.net/cecosoru/1/edit - colin0117

只是一个快速的提示，硬编码 colspan 可以通过引用 rows.columns()[0].length 来消除，例如：.append('<td colspan="'+rows.columns()[0].length+'">' + group + ' (' + rows.count() + ')</td>')。 - Loren Maxwell

我已经尝试了几个小时，想让它工作起来！！我看了Colin的实时例子，试图复制，但我就是做不到，不知道为什么，但就是做不到...有什么指导吗？ - Yorki Bonilla

折叠似乎只适用于行分组的第一层和最后一层。添加第三层并单击中间行不会导致隐藏其下面的行分组。 - Patrick Kwinten

有没有办法在页面加载时将它们折叠起来？我一直试图弄清楚它，但没有成功。 - BeerusDev

如果能帮到某些人，我在“rowGroup”中必须添加属性“startClassName: 'group-start'”才能使它工作，因为实时示例的“click”事件基于“tr.group-start”。 - AlexB

Answer 2

你可以添加一个切换图标来指示折叠状态（使用 font awesome）：

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

- ZooZ

---

这非常有用。谢谢。 - Paresh

如何一起折叠或展开？ - Paresh

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

- justinlav

---

尽管这个解决方案看起来很简洁，但它存在一些问题，可能不应该被接受。特别是当显示的结果条目数改变并且最后显示的组被展开并仅显示结果的子集时，行为是意外的。Martin Wickman提供的上述解决方案没有这个弱点，并且具有优点。使用CSS类进行切换的好处是非常容易设置样式以显示通常的+/-以展开/折叠。硬编码的colspan是一个小代价，经过一些思考，它可能可以被消除。 - flayman

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

- MomasVII