在ag-grid SSRM中实现客户端行分组可行吗？

可以实现，核心思路是将当前页的所有数据加载到客户端后，在本地完成行分组逻辑，避免每次展开分组触发服务端请求。具体步骤如下：

1. 配置列分组与客户端分组模式 #

在列定义中指定第一列为分组列，同时关闭服务端分组模式，强制使用客户端分组：

// 列定义示例
columnDefs = [
  { field: 'groupField', rowGroup: true, hide: false }, // 第一列设为分组列
  // 其他列定义...
];

// Grid配置
gridOptions = {
  serverSidePagination: true, // 保留服务端分页
  serverSideGrouping: false, // 禁用服务端分组，改用客户端分组
  autoGroupColumnDef: {
    headerName: '分组',
    cellRendererParams: {
      suppressCount: true // 可选：隐藏分组计数
    }
  },
  // 其他原有配置...
};

2. 修正服务端数据源逻辑 #

原代码中feature_count使用当前页数据长度会导致分页逻辑异常，需改为返回接口提供的总数据条数，同时确保当前页数据能被客户端正常处理分组：

this.gridApi.setServerSideDatasource({
  getRows: (params) => {
    this.fnService
      .getCompleteFeatureList(Number(params.request.endRow / 50))
      .subscribe(
        (data: any) => {
          const currentPageData = data.data;
          const totalRowCount = data.totalCount; // 替换为接口返回的总条数
          
          if (params.request.startRow === 0 && currentPageData.length === 0) {
            alert('No results found');
          } else {
            params.successCallback(currentPageData, totalRowCount);
          }
        },
        (error: HttpErrorResponse) => {
          alert('Something went wrong! Please retry your search');
        }
      );
  }
});

3. 默认展开所有分组 #

在Grid就绪事件中调用展开方法，确保数据渲染后自动展开所有分组：

onGridReady(params) {
  this.gridApi = params.api;
  // 延迟执行确保数据已加载渲染
  setTimeout(() => {
    this.gridApi.expandAll();
  }, 100);
}

关键说明 #

• 客户端分组仅对当前已加载到本地的页数据生效，切换分页后，新页面的分组会重新在本地生成，不会和之前页面的分组合并（其他页数据未加载）。
• 如果需要跨页合并分组，必须使用服务端分组，但这会触发展开时的API请求，不符合你的需求，当前方案是适配需求的折中选择。

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