Ag-grid使用Server-side Row Model(SSRM)和Partial row store时如何新增行

前置注意事项 #

Partial Store模式下的Server-Side Row Model不会缓存全量行数据，所有行操作默认与服务端数据源绑定，请勿直接修改rowData属性，必须使用Ag-grid提供的SSRM专用操作API。

核心实现步骤 #

SSRM模式下所有行变更操作都通过applyServerSideTransactionAPI完成，根据是否需要立即同步服务端分为两种常用实现场景：

场景1：临时本地新增（仅前端展示，暂不同步服务端） #

• 首先确保你已正确配置getRowId回调，为每一行返回全局唯一的行ID，这是SSRM正确识别行的前提
• 调用applyServerSideTransaction传入新增行配置即可完成插入：

const newTempRow = {
  id: 'temp_' + Date.now(), // 自定义临时唯一ID，后续同步服务端后可替换
  // 补充新增行的其他业务字段
}
// gridApi为你初始化表格时拿到的API实例
gridApi.applyServerSideTransaction({
  add: [newTempRow],
  addIndex: 0, // 可选配置，0代表插入到当前页最顶部，不传默认插到当前页末尾
  route: [] // 平级表格默认传空数组，树形表格需传入对应父节点的route值
})
// 可选：插入完成后自动滚动到新增行位置
gridApi.ensureIndexVisible(0, 'top')

场景2：新增数据同步服务端后更新表格 #

• 先调用业务侧的服务端新增接口，提交新增行的全量字段
• 接口返回成功后，根据业务需求选择以下两种更新方式之一：
  • 轻量插入：无需请求接口，直接将服务端返回的正式行数据插入表格，性能最优，适合不需要参与当前页排序/过滤的场景
  • 刷新当前存储块：重新请求当前页的服务端数据，会自动拉取包含新增行的最新列表，适合需要服务端处理排序/过滤/分页的场景

// 调用你的服务端新增接口
fetch('/api/your/add/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newRowFormData)
}).then(res => res.json()).then(createdOfficialRow => {
  // 方式1：轻量插入正式行
  gridApi.applyServerSideTransaction({
    add: [createdOfficialRow],
    addIndex: 0
  })
  // 方式2：刷新当前SSRM存储块，二选一即可
  // gridApi.refreshServerSideStore({ purge: false })
})

常见异常排查 #

• 调用applyServerSideTransaction后无效果：优先检查getRowId是否正确返回唯一值，或者新增行的ID是否和现有行重复
• 新增行位置和预期排序不一致：如果开启了服务端排序，建议使用刷新存储块的方式更新，由服务端处理排序逻辑后返回正确的行顺序

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