从子jqGrid批量添加数据到父jqGrid时原有数据丢失如何解决

问题原因 #

1. 你使用的Object.assign、jQuery.extend是对象合并API，不适用于数组合并场景：这两个方法会将数组按索引作为键进行覆盖，自然会出现原有数据被新数据替换的问题，方法本身使用场景错误。
2. 你第一种数组合并方案失效的常见原因如下：
   • 行ID重复：jqGrid要求所有行的id属性全局唯一，如果子表数据的id和父表现有数据id重合，合并后的数据渲染时会自动去重，看起来就像原有数据丢失。
   • 分页参数限制：如果父jqGrid开启了分页，且设置的rowNum小于合并后的数据总条数，重载后默认只展示第一页数据，会误以为旧数据丢失。
   • 数据引用异常：部分版本的jqGrid中getGridParam('data')返回的是内部数据的引用，直接操作引用会导致内部数据异常。

解决方案 #

方案1：修正后的setGridParam批量赋值方案 #

var gridParent = jQuery("#parentGrid");
// 深拷贝父表现有数据，避免直接操作内部引用
var existingRows = JSON.parse(JSON.stringify(gridParent.jqGrid('getGridParam', 'data')));
var gridChild = jQuery("#childGrid");
var newRows = JSON.parse(JSON.stringify(gridChild.jqGrid('getGridParam', 'data')));

// 批量处理子表行ID，避免和父表ID重复，可根据业务规则调整
newRows.forEach((row, index) => {
  row.id = 'child_import_' + Date.now() + '_' + index;
});

var mergedData = existingRows.concat(newRows);

// 若开启分页，同步调整rowNum避免数据被分页截断
if (mergedData.length > gridParent.jqGrid('getGridParam', 'rowNum')) {
  gridParent.jqGrid('setGridParam', { rowNum: mergedData.length });
}

// 赋值重载，保留当前页码/滚动位置
gridParent.jqGrid('setGridParam', { data: mergedData }).trigger('reloadGrid', [{ current: true }]);

方案2：内置方法批量追加（推荐） #

jqGrid原生addRowData方法支持直接传入数组批量添加行，不需要手动读取、合并原有数据，也不会覆盖已有记录：

var gridParent = jQuery("#parentGrid");
var newRows = jQuery("#childGrid").jqGrid('getGridParam', 'data');

// 第一个参数传null让jqGrid自动生成唯一行ID，第二个参数直接传新行数组即可批量追加
gridParent.jqGrid('addRowData', null, newRows);

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