首页 文章

jQuery Datatables rowGroup折叠/展开

提问于
浏览 次
1

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

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

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

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

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

我试图覆盖 $.fn.dataTable.ext.search.push 来模拟一个"filter"，它赢得't draw certain rows, which I can do. The issue here is that I can' t决定哪个行是此方法中的rowGroup行以进行绘制，以便删除所有rowGroup行 .

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

jquery datatables

2 回答

  • -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();
    });
    回复于
  • 7

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

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

相关问题