如何在AgGrid React(SSRM+行分组)中获取真实展开层级并更新组列标题？

核心思路 #

利用AG Grid内置API获取所有展开节点的层级信息，结合autoGroupColumnDef.headerValueGetter动态生成表头文本，同时通过onRowGroupOpened触发表头刷新，完全依赖Grid内部状态实现，无需外部React状态。

实现步骤 #

1. 配置自动分组列的表头计算逻辑
   通过headerValueGetter函数，借助Grid API获取当前所有展开节点的最深层级，再按分组维度顺序拼接表头文本：

   const autoGroupColumnDef = {
     headerValueGetter: (params) => {
       const { api } = params;
       // 获取所有处于展开状态的节点
       const openedNodes = api.getOpenedNodes();
       // 计算当前最深的展开层级（根节点level为0，第一层分组节点level为1）
       const maxLevel = openedNodes.reduce((prev, node) => Math.max(prev, node.level), 0);
       // 按实际分组维度顺序定义列名数组
       const groupColumnNames = ['A', 'B', 'C', 'D'];
       // 无展开时默认显示第一列名，否则拼接对应层级的列名
       return maxLevel === 0 ? 'A' : groupColumnNames.slice(0, maxLevel).join('->');
     }
   };
   

2. 绑定展开/折叠事件触发表头刷新
   因为headerValueGetter不会自动响应节点展开状态变化，所以在onRowGroupOpened事件中手动触发表头刷新：

   const onRowGroupOpened = (params) => {
     params.api.refreshHeader();
   };
   

3. 在Grid组件中应用配置
   将上述配置传入AG Grid的React组件：

   <AgGridReact
     rowModelType="serverSide"
     rowGroupPanelShow="always"
     autoGroupColumnDef={autoGroupColumnDef}
     onRowGroupOpened={onRowGroupOpened}
     // 其他SSRM及分组相关配置...
   />
   

关键细节说明 #

• 折叠再展开的状态保留：AG Grid SSRM会自动维护所有节点的展开状态，即使折叠父节点，子节点的展开标记依然存在。调用api.getOpenedNodes()时会包含这些子节点，因此能正确计算当前最深层级。
• 多组展开场景适配：getOpenedNodes()返回所有展开节点，取最大level即可反映当前全局最深的展开层级，不管是单组还是多组展开，表头文本都会匹配最深层级的拼接结果。
• 无需外部状态：所有逻辑基于Grid内部API和事件，完全不需要React组件状态来跟踪展开层级，符合需求。

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