带有复选框的数据表可折叠行组

Question

我对数据表不是很熟悉。事实上，在过去的几周里，我刚刚开始学习使用它。 我需要开发一个带有复选框的可折叠\可扩展行组的数据表。

以下示例实现了我所需要的，除了行组（或显示每个城市下的总行数的标题）不可折叠\可扩展。

https://jsfiddle.net/gyrocode/2b0revo8/

$(document).ready(function (){
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
      'orderFixed': [3, '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>';
         }         
      },
      'columns': [
         {
            'data': 'id',
            'checkboxes': {
               'selectRow': true
            }
         },
         { 'data': 'name' },
         { 'data': 'position' },
         { 'data': 'office' },
         { 'data': 'salary' }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[2, 'asc']]
   } );
     
   // 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);
   });     

} );         

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.css" rel="stylesheet"/>
<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup/">RowGroup</a></h3>
    
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>        
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup//">See full article on Gyrocode.com</a>

最好在页面加载时折叠行组。还应该可以同时扩展几个行组。

你知道如何实现吗？

Answer 1

您必须在 tr 单击时调用切换事件，并且需要在组或 tr 上应用折叠 在这里，我更新了您的 tr 折叠组的代码

 $('#example').on('click', '.group-checkbox', function(e){
      // Get group class name
      var groupName = $(this).data('group-name');
        var collapsed = !!collapsedGroups[groupName];
        collapsedGroups[groupName] = !collapsedGroups[groupName];
      // Select all child rows
      table.cells('tr.' + groupName, 0).checkboxes.select(this.checked)
      $(this).toggleClass('collapsed', collapsed);
        table.draw(false);
   });

这是一个工作演示，如果需要任何更新，您可以要求我希望它对您有所帮助。

$(document).ready(function (){
 var collapsedGroups = {};
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
      'orderFixed': [3, '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 collapsed = !!collapsedGroups[groupName];
            var rowNodes = rows.nodes();
            rowNodes.to$().addClass(groupName);
            rowNodes.each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });    
            // 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);
            // Add category name to the <tr>. NOTE: Hardcoded colspan
            return $('<tr/>')
                .append('<td colspan="8"><label><input type="checkbox" class="group-checkbox" data-group-name="' 
                   + groupName + '"' + (isSelected ? ' checked' : '') +'> ' + groupName + ' (' + rows.count() + ')</label></td>')
                .attr('data-name', groupName)
                .toggleClass('collapsed', collapsed);
         
         }         
      },
      'columns': [
         {
            'data': 'id',
            'checkboxes': {
               'selectRow': true
            }
         },
         { 'data': 'name' },
         { 'data': 'position' },
         { 'data': 'office' },
         { 'data': 'salary' }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[2, 'asc']]
   } );
     
   // Handle click event on group checkbox
   $('#example').on('click', '.group-checkbox', function(e){
      // Get group class name
      var groupName = $(this).data('group-name');
        var collapsed = !!collapsedGroups[groupName];
        collapsedGroups[groupName] = !collapsedGroups[groupName];
      // Select all child rows
      table.cells('tr.' + groupName, 0).checkboxes.select(this.checked)
      $(this).toggleClass('collapsed', collapsed);
        table.draw(false);
   });

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

});         

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.css" rel="stylesheet"/>
<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup/">RowGroup</a></h3>
    
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>        
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup//">See full article on Gyrocode.com</a>