如何在jsGrid中批量插入多条数据 解决单条插入性能下降问题

你当前使用的单条insertItem方法性能差的核心原因是：每次调用insertItem都会触发一次完整的DOM重渲染、数据校验以及行事件绑定操作，当插入数据量超过百级时，频繁的DOM操作会直接导致页面卡顿甚至崩溃。

以下是两种可行的批量插入实现方案：

方案1：全量数据替换（性能最优） #

直接修改jsGrid绑定的数据源数组，仅触发一次全局渲染，是性能最高的批量插入方式：

// 1. 获取表格现有数据
const existingData = $("#jsGrid-vws").jsGrid("option", "data");
// 2. 拼接要插入的批量新数据，batchData为你准备好的多条数据数组
const updatedData = existingData.concat(batchData);
// 3. 一次性更新数据源，仅触发1次重渲染
$("#jsGrid-vws").jsGrid("option", "data", updatedData);

方案2：临时关闭自动渲染后批量插入 #

如果你需要保留insertItem的内置校验、插入回调等原生逻辑，可以先关闭自动渲染，批量插入完成后再手动触发一次渲染：

const grid = $("#jsGrid-vws");
// 关闭自动渲染，所有操作暂不更新DOM
grid.jsGrid("option", "rendering", false);
// 循环插入所有批量数据
for (const item of batchData) {
  grid.jsGrid("insertItem", item);
}
// 重新开启渲染，手动触发一次全局重绘
grid.jsGrid("option", "rendering", true);
grid.jsGrid("render");

额外性能优化建议 #

• 单页展示数据量超过500条时，建议开启jsGrid分页功能，配置paging: true、pageSize等参数，避免一次性渲染大量DOM节点
• 如果数据从服务端获取，优先做服务端分页，不要一次性拉取全量数据到前端
• 批量插入前提前完成所有数据格式校验、字段补全等预处理，减少插入过程中的计算开销
• 插入过程中可以临时关闭不需要的行事件（如hover高亮、行点击回调等），插入完成后再恢复，进一步提升渲染速度

内容的提问来源于stack exchange，提问作者이재원