Grid.js重填表格数据时如何规避重绘并保留视图、搜索、筛选配置

核心结论 #

可以实现更新表格数据的同时保留当前搜索、筛选、分页、排序等视图配置，不需要触发全量表格重绘。

具体实现方法 #

方法1：使用官方专用数据更新方法update()（推荐） #

Grid.js实例内置的update()方法就是专门为更新数据设计的，默认会保留所有用户当前的交互状态，不需要额外配置：

// 示例：grid为你初始化的Grid.js实例对象
const newTableData = [
  ["第一行列1", "第一行列2", "第一行列3"],
  ["第二行列1", "第二行列2", "第二行列3"]
]
// 直接传入新数据即可
grid.update(newTableData)

方法2：配合updateConfig()使用（适用于同时要修改其他配置的场景） #

如果你除了更新数据之外，还需要同步修改其他表格配置，可以在调用updateConfig()时添加preserveState: true参数，之后调用forceRender()也不会清空现有视图配置：

grid.updateConfig({
  data: newTableData,
  // 其他需要同步修改的配置，比如调整分页条数
  pagination: {
    limit: 15
  }
}, { preserveState: true })
// 手动触发渲染时也会保留现有状态
grid.forceRender()

注意事项 #

• 新数据的列数量、列字段名要和原有表格的列定义保持一致，避免出现筛选、搜索匹配异常
• 如果是服务端分页/服务端搜索的场景，需要自行保证传入的新数据是符合当前搜索、筛选、分页条件的结果，update()方法仅负责本地数据更新渲染，不会自动发起接口请求

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