ag-grid-react行分组重复问题：如何实现正确分组？

我之前在使用ag-grid的ServerSide行模型实现分组时，也踩过一模一样的坑——明明只有Logging和Networking两个分组值，结果表格里重复出现N次。核心原因其实是ServerSide行模型下，分组的聚合逻辑是由服务端负责的，前端只是配置分组列并触发请求，如果你直接返回原始未分组的数据，ag-grid就会把每条数据的分组字段值都当成独立分组，自然就重复了。

咱们一步步来排查修复：

1. 先确认前端配置是否正确 #

首先检查你的columnDefs和gridOptions配置，确保没有低级错误：

• 确认controlHeading列的配置符合要求：

  columnDefs: [
    { field: 'controlHeading', rowGroup: true, hide: true },
    // 其他列配置...
  ]
  

• 确认gridOptions里的行模型确实是serverSide：

  gridOptions: {
    rowModelType: 'serverSide',
    // 其他配置...
  }
  

这部分你已经按官方文档配置了，大概率没问题，重点在服务端的处理。

2. 关键：服务端必须处理分组请求 #

ServerSide行模型的核心是服务端驱动，ag-grid会在需要分组数据时，自动向你的数据源发送包含分组信息的请求参数（你可以在浏览器Network面板里查看请求，会看到groupColumns、groupKeys这类参数）。

你需要修改服务端接口，根据这些参数对controlHeading字段做分组聚合，返回符合ag-grid要求的分组数据格式。比如：

• 对于顶层分组（没有父分组的情况），服务端需要返回两个分组行，每个分组行标记group: true，并包含key（分组值，比如Logging）和children（该分组下的子数据）：

// 服务端返回的正确响应示例
{
  rowData: [
    {
      group: true,
      key: 'Logging',
      children: [
        // Logging分组下的所有子行数据
        { id: 1, controlHeading: 'Logging', name: 'Log A', ... },
        { id: 2, controlHeading: 'Logging', name: 'Log B', ... }
      ]
    },
    {
      group: true,
      key: 'Networking',
      children: [
        // Networking分组下的所有子行数据
        { id: 3, controlHeading: 'Networking', name: 'Net A', ... }
      ]
    }
  ],
  rowCount: 2 // 顶层分组的数量，或总数据行数（按需设置）
}

如果服务端没有做这个聚合，而是直接返回所有原始数据（比如10条Logging、5条Networking的记录），ag-grid就会把每条记录都当成一个独立的分组项，自然就出现重复的Logging分组了。

3. 验证请求参数是否正确传递 #

在浏览器的Network面板里，找到ag-grid发送的请求，查看请求参数里是否包含groupColumns，且值为['controlHeading']。如果没有，可能是你的serverSideDatasource的getRows方法没有正确传递分组参数给服务端。比如在getRows里要把params.groupColumns包含到请求参数中：

const datasource = {
  getRows: (params) => {
    // 提取分组参数
    const groupColumns = params.groupColumns?.map(col => col.field);
    // 发送请求到服务端，带上groupColumns等参数
    fetch('/your-api', {
      method: 'POST',
      body: JSON.stringify({
        groupColumns,
        // 其他参数：分页、排序等
        startRow: params.startRow,
        endRow: params.endRow
      })
    })
    .then(res => res.json())
    .then(data => {
      params.success({
        rowData: data.rowData,
        rowCount: data.rowCount
      });
    })
    .catch(err => params.fail());
  }
};

总结 #

这个问题的本质是对ServerSide行模型的理解偏差——它不像ClientSide模型那样前端自动分组，而是需要服务端配合做聚合。只要服务端根据ag-grid的分组请求参数，返回正确的分组嵌套结构，重复分组的问题就会解决。

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