Ag-Grid SSRM模式下setRowCount无法正确更新总行数求助
AgGrid SSRM 异步更新总行数解决方案
在AgGrid Enterprise 28的Server Side Row Model(SSRM)模式下,setRowCount方法并不适用,因为SSRM的总行数由自定义数据源每次getRows请求返回的rowCount字段控制。要实现你需要的效果,需通过以下步骤调整:
核心思路
- 维护一个状态变量存储总行数,仅在初始加载和筛选变化时异步获取并更新该变量
- 在自定义SSRM数据源的
getRows方法中,直接使用该状态变量作为响应的rowCount - 总行数更新后,通知网格刷新行模型,触发滚动条和显示计数的更新
代码调整示例
1. 添加状态变量与更新逻辑
import { useState, useRef, useCallback } from 'react'; import { GridApi, GridReadyEvent, FilterChangedEvent, IServerSideDatasource, IServerSideGetRowsParams } from '@ag-grid-enterprise/all-modules'; // 维护总行数状态 const [totalRowCount, setTotalRowCount] = useState<number>(0); const apiRef = useRef<GridApi>(); const updateRowCount = useCallback(async () => { if (!apiRef.current) return; try { const filterModel = apiRef.current.getFilterModel(); // 异步获取总行数 const count = await myApi.getRowCount({ filterModel }); setTotalRowCount(count); // 刷新行模型,让网格感知总行数变化 // purge: true 会清除缓存数据,适合筛选变化时重新加载;false 保留已加载数据 apiRef.current.refreshServerSideRowModel({ purge: true }); } catch (reason) { console.error('获取总行数失败:', reason); } }, [myApi]); const onFilterChanged = useCallback(() => { updateRowCount(); }, [updateRowCount]); const onGridReady = useCallback((e: GridReadyEvent) => { apiRef.current = e.api; // 设置自定义SSRM数据源 e.api.setServerSideDatasource(datasource); // 初始加载总行数 updateRowCount(); }, [updateRowCount, datasource]);
2. 调整自定义SSRM数据源
const datasource: IServerSideDatasource = { getRows(params: IServerSideGetRowsParams) { // 请求当前页数据 myApi.getPageData({ filterModel: params.request.filterModel, startRow: params.request.startRow, endRow: params.request.endRow }).then(pageData => { // 响应中使用预先获取的总行数 params.success({ rowData: pageData, rowCount: totalRowCount }); }).catch(err => { console.error('获取分页数据失败:', err); params.fail(); }); } };
关键说明
- 为什么
setRowCount不生效?SSRM模式下,网格的总行数完全由数据源getRows响应的rowCount决定,setRowCount仅对客户端行模型(Client-Side Row Model)有效。 - 滚动条适配:当数据源返回正确的
rowCount后,AgGrid会自动根据总行数计算滚动区域的尺寸,实现滚动到末尾的效果。 - 事件与计数更新:调用
refreshServerSideRowModel会触发ModelChanged事件,同时网格会自动更新DisplayedRowCount等相关统计信息。
内容的提问来源于stack exchange,提问作者Ryan Pierce Williams
相关产品推荐
相关产品推荐

