jQuery数据表rowGroup折叠/展开 [英] jQuery Datatables rowGroup Collapse/Expand

问题描述

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

I'm using jQuery Datatables and I would like to incorporate row grouping into the table.

我尝试通过添加行和单击事件处理程序来扩展/折叠与该行组有关的行，从而自己将其合并.这依赖于切换行的可见性，这种方法行得通，但很杂乱.

I have attempted to incorporate it myself by adding rows and a click event handler to expand/collapse the rows pertaining to that row group. This relies on toggling the visibility of the rows, which works but is messy.

我在这里遇到了一个大表的问题，其中大多数行直到滚动事件调用drawCallback时才在DOM中出现，所以当我给行赋予某个类以将它们与行组相关联时，每次滚动时都会删除这些类的桌子.

I had an issue here with large tables where most rows aren't in the DOM until a scroll event calls drawCallback, so when I gave rows a certain class to associate them with a row group, the classes were removed on every scroll of the table.

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

Datatables recommends using their rowGroup extension which I have currently incorporated into my table. https://datatables.net/extensions/rowgroup/

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

This extension has no option to expand or collapse a group, does anyone have any experience manipulating this extension to add expand/collapse functionality?

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

I have attempted to override $.fn.dataTable.ext.search.push to simulate a "filter" that won't draw certain rows, which I can do. The issue here is that I can't decide which row is a rowGroup row in this method to draw so all of the rowGroup rows are removed.

有人使用rowGroup扩展有运气吗?

Has anyone had any luck expanding/collapsing groups using the rowGroup extension?

推荐答案

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

First add a state to keep track of collapsed groups:

 var collapsedGroups = {};

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

Next, add this to the Datatable initialization to enable the rowGroup plugin. It works by checking collapapsedGroups and then this info to hide or show the rows. It also adds a css-class indicating if it's collapsed or not:

 {
    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:

Finally, add a handler for clicking on the row for collapsing/expanding rows. This causes a redraw of the table which, in turn, calls startRender above:

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

此处是一个可行的示例.

这篇关于jQuery数据表rowGroup折叠/展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！