如何实现带复选框的可折叠/展开行组Datatable功能

实现逻辑 #

你只需要在原有代码基础上增加折叠状态控制逻辑、状态样式、点击事件即可满足需求：默认所有行组加载时折叠，支持同时展开多个行组，保留原有的行组全选、子项选择功能。 #

步骤1：新增自定义样式 #

/* 行组标题鼠标悬浮显示可点击状态 */
tr.dtrg-start td {
  cursor: pointer;
  user-select: none;
}
/* 子行折叠隐藏类 */
.group-hidden {
  display: none !important;
}
/* 折叠/展开标识样式，可自定义替换为图标 */
.group-toggle-icon {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s;
}
.group-toggle-icon.collapsed {
  transform: rotate(-90deg);
}

步骤2：修改JS逻辑 #

完整修改后的JS代码如下，改动点已包含： #

$(document).ready(function (){
   // 存储每个行组的展开/折叠状态，默认全部折叠
   const groupCollapseState = {};

   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
      'orderFixed': [3, 'asc'],
      'rowGroup': {
         'dataSrc': 'office',
         'startRender': function(rows, group) {
            // 生成组唯一类名
            var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
            var rowNodes = rows.nodes();
            rowNodes.to$().addClass(groupName);
            
            // 初始化组状态，默认折叠，重绘时保持原有状态
            if (groupCollapseState[groupName] === undefined) {
              groupCollapseState[groupName] = false;
              rowNodes.to$().addClass('group-hidden');
            } else {
              rowNodes.to$().toggleClass('group-hidden', !groupCollapseState[groupName]);
            }
            
            // 原有的行组复选框选中逻辑保留
            var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);
            var isSelected = (checkboxesSelected.length == rowNodes.length);
            // 折叠标识状态同步
            var iconCollapseClass = groupCollapseState[groupName] ? '' : 'collapsed';
            
            // 返回行组内容，注意colspan要和表格总列数一致
            return `<td colspan="5">
                      <span class="group-toggle-icon ${iconCollapseClass}">▼</span>
                      <label>
                        <input type="checkbox" class="group-checkbox" data-group-name="${groupName}"${isSelected ? ' checked' : ''}> 
                        ${group} (${rows.count()})
                      </label>
                    </td>`;
         }         
      },
      'columns': [
         {
            'data': 'id',
            'checkboxes': {
               'selectRow': true
            }
         },
         { 'data': 'name' },
         { 'data': 'position' },
         { 'data': 'office' },
         { 'data': 'salary' }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[2, 'asc']]
   } );
     
   // 行组复选框点击事件：阻止冒泡避免触发展开/折叠，保留全选逻辑
   $('#example').on('click', '.group-checkbox', function(e){
      e.stopPropagation();
      var groupName = $(this).data('group-name');
      table.cells('tr.' + groupName, 0).checkboxes.select(this.checked);
   });

   // 全选框逻辑保留
   $('#example').on('click', 'thead .dt-checkboxes-select-all', function(e){
      var $selectAll = $('input[type="checkbox"]', this);      
      setTimeout(function(){
         $('.group-checkbox').prop('checked', $selectAll.prop('checked'));
      }, 0);
   });   

   // 行组标题点击切换展开/折叠状态
   $('#example').on('click', 'tr.dtrg-start', function(){
      const $toggleIcon = $(this).find('.group-toggle-icon');
      const groupName = $(this).find('.group-checkbox').data('group-name');
      // 切换状态
      groupCollapseState[groupName] = !groupCollapseState[groupName];
      $toggleIcon.toggleClass('collapsed', !groupCollapseState[groupName]);
      // 切换子行显隐
      $('tr.' + groupName).toggleClass('group-hidden', !groupCollapseState[groupName]);
   });
} );  

注意事项 #

• 如果你的表格总列数不是5，请修改startRender返回的td标签的colspan属性值为实际列数
• 可以将代码中的▼替换为你项目中使用的图标库对应图标，样式可自行调整
• 表格重绘（分页、排序、搜索）后，行组的折叠/展开状态会自动保留

内容的提问来源于stack exchange，提问作者Rod