2017-09-25 558 views
1

我正在使用jQuery Datatables,我想将行分组合并到表中。jQuery Datatables rowGroup折叠/展开

我已经尝试通过添加行和单击事件处理程序来展开/折叠属于该行组的行,从而自行整合它。这依赖于切换行的可见性,这可行但是很混乱。

我在这里有一个问题,大表中的大多数行不在DOM中,直到滚动事件调用drawCallback为止,所以当我给行赋予某个类以将它们与行组相关联时,桌子的滚动。

Datatables建议使用他们的rowGroup扩展,我现在已将其纳入我的表中。 https://datatables.net/extensions/rowgroup/

此扩展没有扩展或折叠组的选项,任何人都没有任何操作这个扩展添加展开/折叠功能的经验吗?

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

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

回答

0

我已经找到了自己的答案,所以我想分享它,如果其他人有未来的问题。

使用下面的代码来实现行分组,其中索引是要分组由列索引:

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

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

var collapsedGroups = {}; 

接下来,将此添加到数据能够初始化以启用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(); 
    });