如何修改Datatables rowGroup实现仅允许展开一个分组？

原代码支持同时展开多个RowGroup分组，现需修改为仅允许单个分组展开，以下是具体修改方案：

核心修改思路 #

将原来存储多个展开分组的对象collapsedGroups替换为单个变量，仅记录当前处于展开状态的分组名称，渲染时只对该分组的行进行显示，点击切换时更新这个变量即可。

修改后的完整代码 #

// 替换原collapsedGroups对象，用单个变量记录当前展开的分组
var expandedGroup = null;

rowGroup: {
    dataSrc: 'data',
    startRender: function(rows, group) {
        // 判断当前分组是否为展开状态
        var isExpanded = group === expandedGroup;
         
        rows.nodes().each(function (r) {
            // 默认隐藏所有行
            r.style.display = 'none';
            // 仅展开状态的分组行显示
            if (isExpanded) {
                r.style.display = '';
            }
        });

        return $('<tr/>')
            .append('<td></td>')
            .attr('data-name', group)
            // 给未展开的分组添加collapsed类（匹配原逻辑的样式控制）
            .toggleClass('collapsed', !isExpanded);
    }
},

// 点击展开/收起按钮的事件处理
$(document).on('click', 'i.fa-angle-down', function() {
    var name = $(this).parent('td').parent('tr').data('name');
    
    // 如果点击的是当前展开的分组，就收起；否则切换到该分组展开
    if (expandedGroup === name) {
        expandedGroup = null;
    } else {
        expandedGroup = name;
    }
    
    table.draw(false);
});

修改要点说明 #

1. 变量替换：用expandedGroup单个变量替代原collapsedGroups对象，初始值设为null表示无分组展开
2. 渲染逻辑调整：在startRender中，通过group === expandedGroup判断当前分组是否需要展开，仅对匹配的分组行设置显示
3. 点击事件更新：点击时判断当前分组是否已展开，已展开则重置变量（收起），否则设置为当前分组（展开该分组，自动收起其他分组）

内容的提问来源于stack exchange，提问作者Björn C