java列表展开折叠,jQuery Datatables rowGroup折叠/展开

首先添加状态以跟踪折叠组：

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

. NOTE: Hardcoded colspan

return $('

')

.append('

' + group + ' (' + rows.count() + ')')

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

});