数据表 - 带有复选框的行分组

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

编辑:我刚刚发现Datatablescheckboxes 扩展无法识别我实际设置的那些复选框,我不知何故需要使用这个api cells().checkboxes.select(state) 来设置孩子复选框。

【讨论】:

以上是关于数据表 - 带有复选框的行分组的主要内容,如果未能解决你的问题,请参考以下文章

具有组级别选择的 SlickGrid 多级分组

从剑道网格中获取检查的行

将复选框与相应的输入字段分组

数据库优化二

选择带有分组的最大日期的行名

存储选定的行 ID