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

【问题标题】：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/

【问题讨论】：

我的同伴 stackoverflowers，不要投反对票，而是帮助我改善问题，因为 stackoverflow 网站建议您！我猜你不知道投反对票的意思，这不是我不喜欢它！

标签： jquery html checkbox datatables grid

【解决方案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) 来设置孩子复选框。

【讨论】：