Free JQGrid本地添加用户JSON数据遇问题：addJSONData报错且缺文档

一、addJSONData报错的原因 #

旧版JQGrid的addJSONData方法已在Free JQGrid中被移除，因此调用该方法会抛出Uncaught TypeError: $(...).addJSONData is not a function错误，请勿再使用此方法。

二、本地添加JSON数据的实现方式 #

方法1：用addRowData添加单条或多条数据 #

• 单条数据添加：

// 数据结构需与colModel定义的字段对应
const newRow = {id: 101, username: "Alice", email: "alice@example.com"};
$("#myGrid").jqGrid('addRowData', newRow.id, newRow);

• 批量添加多条数据：

const newRows = [
  {id: 101, username: "Alice", email: "alice@example.com"},
  {id: 102, username: "Bob", email: "bob@example.com"}
];
// 第三个参数可选"last"（追加到末尾）或"first"（插入到开头）
$("#myGrid").jqGrid('addRowData', 'id', newRows, "last");

方法2：更新数据源后重载表格 #

适合批量替换或追加大量数据：

// 获取当前表格的本地数据源
const currentData = $("#myGrid").jqGrid('getGridParam', 'data');
// 新增数据数组
const additionalData = [
  {id: 103, username: "Charlie", email: "charlie@example.com"},
  {id: 104, username: "Diana", email: "diana@example.com"}
];
// 合并数据
const updatedData = [...currentData, ...additionalData];
// 更新表格数据源并重载
$("#myGrid").jqGrid('setGridParam', {
  data: updatedData,
  datatype: 'local' // 确保处于本地数据模式
}).trigger('reloadGrid');

三、Free JQGrid中userData的设置与使用 #

userData用于存储表格的附加信息（如统计值、额外参数等），操作方式如下：

1. 初始化表格时设置 #

$("#myGrid").jqGrid({
  datatype: 'local',
  data: initialDataset,
  userData: {totalUsers: 4, totalEmails: 4}, // 自定义附加数据
  footerrow: true, // 若需在底部展示userData，需开启此配置
  // 其他colModel等配置项...
});

2. 动态更新userData #

// 获取当前userData
let userData = $("#myGrid").jqGrid('getGridParam', 'userData');
// 修改或添加属性
userData.totalUsers = 5;
// 更新表格的userData
$("#myGrid").jqGrid('setGridParam', {userData: userData});
// 如需在底部展示，更新footer数据
$("#myGrid").jqGrid('footerData', 'set', {
  username: '总计',
  email: userData.totalUsers
});

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