如何实现agGrid中列组的全列折叠功能

问题出在：当second_group下所有子列都设置columnGroupShow: 'open'时，AG Grid会判定该组在折叠状态下没有任何可见列，因此自动隐藏了展开/折叠按钮。要实现整个组的折叠功能（折叠时所有子列隐藏，展开时全部显示），可以用以下几种方法：

方法一：添加占位列触发按钮显示 #

给分组内加一个仅在折叠时显示的占位列（宽度设为0，用户无感知），其他业务列保持columnGroupShow: 'open'配置：

public columnDefs = [
    {
      headerName: '',
      children: [
        { field: 'field1' },
        { field: 'field2' },
        { field: 'field3' },
      ],
    },
    {
      headerName: 'second_group',
      children: [
        // 占位列，仅组折叠时显示，宽度设为0不占用空间
        { field: 'group_placeholder', headerName: '', width: 0, columnGroupShow: 'closed' },
        { field: 'field4', columnGroupShow: 'open' }, 
        { field: 'field5', columnGroupShow: 'open' }
      ],
    },
];

原理：AG Grid需要分组在折叠状态下至少有一列可见才会保留展开/折叠按钮，占位列满足这个条件，同时因为宽度为0，用户看不到它，不影响界面效果。

方法二：监听组展开事件手动控制列显隐 #

移除子列的columnGroupShow配置，通过监听分组的展开/折叠事件，手动控制所有子列的可见性：

public columnDefs = [
    {
      headerName: '',
      children: [
        { field: 'field1' },
        { field: 'field2' },
        { field: 'field3' },
      ],
    },
    {
      headerName: 'second_group',
      openByDefault: true, // 默认展开状态
      children: [
        { field: 'field4' }, 
        { field: 'field5' }
      ],
    },
];

// 网格就绪时绑定事件
onGridReady(params) {
  const gridApi = params.api;
  // 监听分组展开/折叠事件
  gridApi.addEventListener('columnGroupOpened', (event) => {
    // 判断是否是目标分组
    if (event.column.getColDef().headerName === 'second_group') {
      const childColumns = event.column.getChildren();
      // 根据分组状态设置所有子列的可见性
      childColumns.forEach(col => {
        gridApi.setColumnVisible(col.getColId(), event.opened);
      });
    }
  });
}

原理：完全通过API控制列显隐，不需要依赖columnGroupShow的自动逻辑，灵活性更高，适合复杂场景。

方法三：反向配置columnGroupShow（适合特殊需求） #

如果接受“折叠时显示列，展开时隐藏”的反向逻辑，可以给所有子列设置columnGroupShow: 'closed'，并让分组默认展开：

public columnDefs = [
    {
      headerName: '',
      children: [
        { field: 'field1' },
        { field: 'field2' },
        { field: 'field3' },
      ],
    },
    {
      headerName: 'second_group',
      openByDefault: true,
      children: [
        { field: 'field4', columnGroupShow: 'closed' }, 
        { field: 'field5', columnGroupShow: 'closed' }
      ],
    },
];

注：这个方法的效果和需求相反，仅适合有反向显隐需求的场景。

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