Question

我有一系列以下数据：

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

我想使用数据表来显示按程序名称分组的数据网格，每行都有一个复选框（和组名称行也是如此！），如果用户点击组行的复选框，则其所有子项都将是检查，像这样的东西，但有datatables插件！

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

Answer 1

我设法解决了这个问题，我像这样覆盖了String string = ""; try { byte[] utf8Bytes = string.getBytes("UTF-8"); string = new String(utf8Bytes, "UTF-8"); } catch ( UnsupportedEncodingException e ) { e.printStackTrace(); } string=string.replaceAll("[\u1F600]", "grinningF"); //also tried "\u1F600" and "u1F600" System.out.println(string);的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); } }); });的{{1}}扩展程序无法识别出我实际设置的复选框，我不知何故需要使用此api {{1用于设置子复选框。

Answer 2

解

我是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。

LINKS

jQuery DataTables: Row grouping and checkboxes

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

2 个答案:

解

样本

LINKS