数据表 - 带有复选框的行分组
Posted
技术标签:
【中文标题】数据表 - 带有复选框的行分组【英文标题】:Datatables - Row grouping with checkboxes 【发布时间】:2018-05-16 16:36:11 【问题描述】:我有一个包含以下数据的数组:
"Id":1,"ProgramName":"Adobe Reader XI
(11.0.23)","FileName":"AcroBroker.exe","FileHash":"1bfb99860246e334c00e4427b54afc3e"
我想使用数据表来显示按程序名称分组的数据网格,每行上都有一个复选框(还有组名行!),如果用户单击组行的复选框,则其所有子行都将检查,类似这样的东西,但有数据表插件!
http://jsfiddle.net/Suninsky/564RP/12/
【问题讨论】:
我的同伴 ***ers,不要投反对票,而是帮助我改善问题,因为 *** 网站建议您!我猜你不知道投反对票的意思,这不是我不喜欢它! 【参考方案1】:解决方案
我是jQuery DataTables Checkboxes插件的作者。
我添加了example,演示了如何将 jQuery DataTables Checkboxes 扩展与 RowGroup 扩展一起使用。
以下是完整代码的摘录,展示了最重要的部分。
var table = $('#example').DataTable(
// ... skipped ...
'orderFixed': [4, 'asc'],
'rowGroup':
'dataSrc': 'office',
'startRender': function(rows, group)
// Assign class name to all child rows
var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
var rowNodes = rows.nodes();
rowNodes.to$().addClass(groupName);
// Get selected checkboxes
var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);
// Parent checkbox is selected when all child checkboxes are selected
var isSelected = (checkboxesSelected.length == rowNodes.length);
return '<label><input type="checkbox" class="group-checkbox" data-group-name="'
+ groupName + '"' + (isSelected ? ' checked' : '') +'> ' + group + ' (' + rows.count() + ')</label>';
);
// Handle click event on group checkbox
$('#example').on('click', '.group-checkbox', function(e)
// Get group class name
var groupName = $(this).data('group-name');
// Select all child rows
table.cells('tr.' + groupName, 0).checkboxes.select(this.checked);
);
// Handle click event on "Select all" checkbox
$('#example').on('click', 'thead .dt-checkboxes-select-all', function(e)
var $selectAll = $('input[type="checkbox"]', this);
setTimeout(function()
// Select group checkbox based on "Select all" checkbox state
$('.group-checkbox').prop('checked', $selectAll.prop('checked'));
, 0);
);
演示
有关完整代码和演示,请参阅 this jsFiddle。
链接
jQuery DataTables: Row grouping and checkboxes
【讨论】:
非常感谢您的回答,我们也可以支持父复选框的中间值吗?加起来难吗? @badzilla,这并不简单,需要一些额外的思考。【参考方案2】:我设法通过这个解决了这个问题,我像这样覆盖了 DataTables 的 startRender
:
rowGroup:
dataSrc: 'ProgramName',
startRender: function(rows, group)
rows.every(function(rowIdx, tableLoop, rowLoop)
var rowData = this.data();
$(this.node()).addClass(group.replace(/[^A-Za-z0-9]/g, ''));
);
return "<input type='checkbox' class='program-name-checkbox' data-program='" +
group.replace(/[^A-Za-z0-9]/g, '') + "'/>" + group + '(' + rows.count() + ')';
在这段代码的帮助下,我在点击父级时标记了子级复选框:
$(document).ajaxComplete(function()
$('.program-name-checkbox').on('click',
function(event)
debugger;
var programName = $(this).data('program');
var childs = $('tr.' + programName).find("input[type='checkbox']");
if (this.checked)
childs.prop('checked', true);
else
childs.prop('checked', false);
);
);
编辑:我刚刚发现Datatables
的checkboxes
扩展无法识别我实际设置的那些复选框,我不知何故需要使用这个api cells().checkboxes.select(state)
来设置孩子复选框。
【讨论】:
以上是关于数据表 - 带有复选框的行分组的主要内容,如果未能解决你的问题,请参考以下文章