如何在AG-Grid SSRM中实现分组且展开行时无额外API请求

我在React应用中使用AG-Grid的Server-Side Row Model（SSRM），想要从后端一次性拉取所有数据，在客户端完成分组，用户展开分组时不触发额外API请求，但现在遇到了展开分组时AG-Grid仍会向后端请求数据的问题。

当前后端返回数据示例 #

[
  {
    "id": "item1",
    "parentJobSiteId": "site1",
    "modelName": "Model A",
    "otherDetails": "Details A"
  },
  {
    "id": "item2",
    "parentJobSiteId": "site1",
    "modelName": "Model B",
    "otherDetails": "Details B"
  },
  {
    "id": "item3",
    "parentJobSiteId": "site2",
    "modelName": "Model C",
    "otherDetails": "Details C"
  }
]

面临的挑战 #

• 展开分组时，AG-Grid会向后端请求分组节点的子数据，但所有数据已存在客户端；
• 需要配置AG-Grid以预先加载所有数据，避免展开节点时的不必要服务器请求。

我的问题 #

1. 如何配置AG-Grid SSRM使用已提供的数据进行分组，不发起额外API请求？
2. 是否可以预加载所有必要数据，纯在客户端处理分组展开？

当前网格配置代码片段 #

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideStoreType: 'partial',
  treeData: true,
  autoGroupColumnDef: {
    headerName: 'Job Site',
    field: 'parentJobSiteId',
    cellRenderer: 'agGroupCellRenderer',
  },
  columnDefs: [
    { field: 'parentJobSiteId',  rowGroup: true },
    { field: 'modelName' },
    { field: 'otherDetails' }
  ],
  // Other grid options...
};

问题1：配置AG-Grid SSRM使用本地数据分组，避免额外请求 #

要实现需求，需调整以下几个关键配置：

1. 修改serverSideStoreType为full：这个配置会让AG-Grid在客户端缓存所有已加载的数据，展开分组时直接从本地缓存取子节点，不再发起API请求。
2. 自定义serverSideDatasource：通过自定义数据源，一次性把所有拿到的数据交给AG-Grid，后续不再触发新请求。示例代码如下：

// 自定义数据源
const createServerSideDatasource = (data) => {
  return {
    getRows: (params) => {
      // 首次加载返回所有数据，后续请求直接用缓存
      params.success({
        rowData: data,
        rowCount: data.length
      });
    }
  };
};

// 在组件中初始化网格时设置数据源（假设已从后端拿到fetchedData）
useEffect(() => {
  if (gridApi && fetchedData) {
    gridApi.setServerSideDatasource(createServerSideDatasource(fetchedData));
  }
}, [gridApi, fetchedData]);

3. 优化分组配置：移除treeData配置（SSRM的分组模式不需要依赖treeData，它更适合层级明确的树形数据），同时可以把parentJobSiteId列隐藏，用自动分组列展示分组信息。修改后的gridOptions：

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideStoreType: 'full', // 核心修改点
  autoGroupColumnDef: {
    headerName: 'Job Site',
    cellRenderer: 'agGroupCellRenderer',
  },
  columnDefs: [
    { field: 'parentJobSiteId', rowGroup: true, hide: true }, // 隐藏原字段，用分组列展示
    { field: 'modelName' },
    { field: 'otherDetails' }
  ],
  // 可选：关闭分页，因为所有数据已加载完成
  pagination: false
};

问题2：是否可以预加载所有数据纯客户端处理分组展开 #

完全可以。通过上述配置，把serverSideStoreType设为full并一次性加载所有数据后，AG-Grid会在客户端完成所有分组逻辑，用户展开分组时直接读取本地缓存的子节点，不会发起任何额外API请求。这种方式既保留了SSRM的部分特性（比如客户端分组、排序），又实现了纯客户端的分组展开操作。

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