Ag-grid Server-side Row Model分页失效，寻求与Master Detail兼容方案

当然可以同时实现这两个功能！你遇到的SSRM变成客户端分页的问题，大概率是配置细节没做到位——毕竟SSRM本身就是为服务端数据场景设计的，完全支持和Master Detail搭配使用，而且你已经有企业版权限了，这俩功能是兼容的。

下面是关键配置步骤和注意事项：

1. 基础配置：启用SSRM和Master Detail #

首先要确保核心配置项正确，别和Infinite Row Model的配置混淆：

• 设置rowModelType: 'serverSide'（这是启用SSRM的核心）
• 开启masterDetail: true，同时配置detailCellRendererParams来定义子表的行为和结构

2. 确保服务端分页生效的核心：正确实现serverSideDatasource #

你之前的SSRM变成客户端分页，大概率是因为在getRows方法里返回了全部数据，而不是基于AG Grid传递的分页参数去服务端获取对应数据段。正确的做法是：

• 在serverSideDatasource.getRows中，使用request.startRow和request.endRow这两个参数，向服务端请求对应范围的数据
• 服务端返回数据时，必须包含总数据量（比如totalCount），并在params.success()中传入rowCount，这样AG Grid才能计算总页数和分页逻辑
• 不要开启serverSideStoreType: 'full'（这个配置会把所有数据存在客户端，强制变成客户端分页），保持默认的partial即可

3. Master Detail与SSRM的配合细节 #

如果子表也需要服务端分页，同样要给子表配置serverSideDatasource，并且可以通过主行数据传递关联参数（比如主行ID）：

• 在detailCellRendererParams.detailGridOptions中，设置子表的rowModelType: 'serverSide'和分页配置
• 在子表的getRows方法里，通过params.data获取主行的关联数据（比如parentId），以此作为子表数据请求的过滤条件

简单示例代码 #

const gridOptions = {
  // 主表核心配置
  rowModelType: 'serverSide',
  masterDetail: true,
  pagination: true,
  paginationPageSize: 10,
  columnDefs: [
    { field: 'id', headerName: '主表ID' },
    { field: 'name', headerName: '名称' }
    // 其他主表列
  ],
  // 主表服务端数据源
  serverSideDatasource: {
    getRows(params) {
      // 基于分页参数请求主表数据
      fetch(`/api/main-data?start=${params.request.startRow}&end=${params.request.endRow}`)
        .then(res => res.json())
        .then(data => {
          params.success({
            rowData: data.rows, // 当前页的数据
            rowCount: data.totalCount // 总数据量
          });
        })
        .catch(err => params.fail());
    }
  },
  // Master Detail配置
  detailCellRendererParams: {
    detailGridOptions: {
      // 子表也用SSRM实现服务端分页
      rowModelType: 'serverSide',
      pagination: true,
      paginationPageSize: 5,
      columnDefs: [
        { field: 'childId', headerName: '子表ID' },
        { field: 'content', headerName: '内容' }
        // 其他子表列
      ],
      // 子表服务端数据源
      serverSideDatasource: {
        getRows(params) {
          // 获取主行ID作为子表数据的过滤条件
          const parentId = params.data.id;
          // 子表分页请求
          fetch(`/api/child-data?parentId=${parentId}&start=${params.request.startRow}&end=${params.request.endRow}`)
            .then(res => res.json())
            .then(data => {
              params.success({
                rowData: data.rows,
                rowCount: data.totalCount
              });
            })
            .catch(err => params.fail());
        }
      }
    },
    // 触发子表数据加载
    getDetailRowData(params) {
      params.success();
    }
  }
};

常见错误排查 #

• 检查是否在getRows中返回了全部数据：如果服务端一次性返回所有数据，AG Grid会自动切换为客户端分页
• 确认rowCount是否正确传递：没有这个参数，AG Grid无法判断总页数，会导致分页异常
• 子表的数据源是否正确关联主行数据：如果子表请求没有携带主行标识，可能会返回错误数据

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