jQuery Datatables rowGroup摺疊/展開

我正在使用jQuery Datatables，我想將行分組合併到表中。jQuery Datatables rowGroup摺疊/展開

我已經嘗試通過添加行和單擊事件處理程序來展開/摺疊屬於該行組的行，從而自行整合它。這依賴於切換行的可見性，這可行但是很混亂。

我在這裏有一個問題，大表中的大多數行不在DOM中，直到滾動事件調用drawCallback爲止，所以當我給行賦予某個類以將它們與行組相關聯時，桌子的滾動。

Datatables建議使用他們的rowGroup擴展，我現在已將其納入我的表中。 https://datatables.net/extensions/rowgroup/

此擴展沒有擴展或摺疊組的選項，任何人都沒有任何操作這個擴展添加展開/摺疊功能的經驗嗎？

我試圖覆蓋$.fn.dataTable.ext.search.push以模擬不會畫出某些行的「過濾器」，我可以這樣做。這裏的問題是，我不能確定哪個行是這個方法中的rowGroup行來繪製，因此所有的rowGroup行都被刪除了。

有沒有人有使用rowGroup擴展擴展/摺疊組的運氣？

來源

2017-09-25 justinlav

我已經找到了自己的答案，所以我想分享它，如果其他人有未來的問題。

使用下面的代碼來實現行分組，其中索引是要分組由列索引：

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

來源

2017-09-28 20:13:35 justinlav

首先添加一個狀態來跟蹤摺疊的羣組：

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

來源

2018-01-24 15:50:30

jQuery Datatables rowGroup摺疊/展開

回答

相關問題