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

Question

我有一个包含以下数据的数组:

{"Id":1,"ProgramName":"Adobe Reader XI 
(11.0.23)","FileName":"AcroBroker.exe","FileHash":"1bfb99860246e334c00e4427b54afc3e"}

我想使用数据表来显示按程序名称分组的数据网格，每行上都有一个复选框(还有组名称行!)，如果用户单击组行的复选框，则其所有子行都将被选中检查过，类似这样但带有数据表插件!

http://jsfiddle.net/Suninsky/564RP/12/

Answer 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