AG Grid React企业版29.1：删除行后getRows重复调用API问题

问题分析 #

你遇到的情况是AG Grid企业版服务端模式下，调用applyServerSideTransaction删除行后，网格自动触发getRows请求后端API。核心原因有两个：

1. AG Grid默认会在删除行后尝试填充当前页的行数（保持pageSize），触发补行请求；
2. getRows中successCallback未传递总记录数，导致网格无法正确维护分页状态，触发额外校验请求。

解决方案 #

1. 完善getRows的successCallback，传递总记录数

首先确保后端返回总记录数，在getRows中把总条数传给successCallback，让AG Grid准确知晓数据总量：

const getEmployeeDataSource = () => { // 修正原函数名拼写错误
    return {
        async getRows(params) {
            const response = await getDetails(
                params.request.startRow,
                Object.keys(employeeDataGrid.current.api.getFilterModel())
            );
            // 补充总记录数，根据后端返回字段调整
            const totalCount = response?.data?.totalCount || 0;
            params.successCallback(response?.data?.details, totalCount);
        },
    };
};

2. 执行删除事务时禁止自动刷新

调用applyServerSideTransaction时，通过第三个参数设置suppressRefresh: true，告诉AG Grid执行本地事务后不要触发数据刷新：

const handleDeleteEmployee = async () => {
    const selectedEmployee = employeeDataGrid.current?.api?.getSelectedRows();
    if (!selectedEmployee?.length) return;

    // 先调用后端删除接口，确保数据在后端已删除
    await deleteEmployee(selectedEmployee[0].id); // 替换为你的实际删除API

    // 执行本地删除事务，禁止自动刷新
    const transaction = { remove: [selectedEmployee[0]] };
    employeeDataGrid.current.api.applyServerSideTransaction(
        transaction,
        undefined,
        { suppressRefresh: true }
    );
};

3. 处理分页边界情况（可选）

如果删除的是当前页最后一行，且不是第一页，建议手动跳转到上一页，避免页面出现空数据：

const handleDeleteEmployee = async () => {
    const selectedEmployee = employeeDataGrid.current?.api?.getSelectedRows();
    if (!selectedEmployee?.length) return;

    await deleteEmployee(selectedEmployee[0].id);

    const api = employeeDataGrid.current.api;
    const currentPageInfo = api.paginationGetCurrentPageInfo();
    const currentRowCount = api.getModel().getRowCount();

    const transaction = { remove: [selectedEmployee[0]] };
    api.applyServerSideTransaction(transaction, undefined, { suppressRefresh: true });

    // 当前页删除后无数据且不是第一页，跳转到上一页
    if (currentRowCount - 1 === 0 && currentPageInfo.currentPage > 0) {
        api.paginationGoToPage(currentPageInfo.currentPage - 1);
    }
};

额外注意 #

• 原代码中getEmployeeDataSrocue存在拼写错误，修正为getEmployeeDataSource，避免找不到数据源；
• 删除操作务必先调用后端API确保数据删除成功，再执行本地事务，避免数据不一致。

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