当通过 AJAX 加载包含 jqGrid 的 HTML 片段时，因 DOM 尚未就绪或 Grid 插件未初始化，直接执行 setGridParam 会失败；正确做法是在内容加载完成回调中初始化 Grid，并确保表格元素已存在且 jqGrid 已正确绑定。
当通过 ajax 加载包含 jqgrid 的 html 片段时，因 dom 尚未就绪或 grid 插件未初始化，直接执行 `setgridparam` 会失败；正确做法是在内容加载完成回调中初始化 grid，并确保表格元素已存在且 jqgrid 已正确绑定。
在 AJAX 动态加载含 jqGrid 的页面片段（如 gridePage.html）时，常见误区是将 Grid 初始化代码（如 $("#gridtable").jqGrid(...)）写在被加载的 HTML 内部，或在 $.ajax().success 中过早调用——此时 HTML 内容虽已插入 #content，但 jqGrid 插件尚未对新 DOM 元素进行实例化，导致 $("#gridtable") 找不到有效 Grid 实例，.setGridParam() 调用静默失效。
根本原因：jqGrid 并非纯数据驱动组件，它依赖显式初始化（即首次调用 .jqGrid({}) 构造方法）。仅插入
标签不会自动创建 Grid 实例；必须在表格 DOM 存在后、且 jQuery 和 jqGrid 库均已加载的前提下，主动调用初始化方法。✅ 正确实践：使用 $.fn.load() 替代原始 $.ajax()，并利用其内置回调确保 DOM 渲染与脚本执行的严格时序：
jQuery 1.12.4
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
下载
$('#content').load("/gridePage.html", function(response, status, xhr) {
if (status === "success") {
// 确保 #gridtable 已存在于 DOM 中
const $grid = $("#gridtable");
if ($grid.length === 0) {
console.warn("jqGrid table #gridtable not found in loaded content.");
return;
}
// 若 grid 尚未初始化（推荐：先检查再初始化）
if (!$grid.hasClass("ui-jqgrid")) {
$grid.jqGrid({
datatype: "local",
colModel: [
{ name: "type", label: "类型", width: 120 },
{ name: "area", label: "区域", width: 150 }
],
height: "auto",
rowNum: 10,
viewrecords: true,
caption: "动态加载的网格"
});
}
// 设置数据并重载
$grid.jqGrid('setGridParam', {
data: [{
'type': 'aType',
'area': 'anArea'
}]
}).trigger("reloadGrid");
}
});
⚠️ 注意事项：
-
避免重复初始化：多次调用 .jqGrid({...}) 会导致异常。务必先判断 $("#gridtable").hasClass("ui-jqgrid") 或使用 $.jgrid.gridUnload("#gridtable") 清理旧实例；
-
资源加载顺序：确保 main.html 中已全局引入 jQuery、jqGrid CSS/JS（含中文语言包等），否则回调中调用会报 $.jqGrid is not a function；
-
替代方案（不推荐但可行）：若必须用 $.ajax，请将 Grid 初始化逻辑移至 success 回调末尾，并添加 setTimeout(..., 0) 强制进入下一轮事件循环，以确保浏览器完成 DOM 插入：
$.ajax({
url: "/gridePage.html",
success: function(data) {
$('#content').html(data);
// 延迟执行，确保 DOM 渲染完成
setTimeout(() => {
const $g = $("#gridtable");
if ($g.length && !$g.hasClass("ui-jqgrid")) {
$g.jqGrid({ /* 初始化配置 */ });
}
$g.jqGrid('setGridParam', { data: [...] }).trigger("reloadGrid");
}, 0);
}
});
总结：jqGrid 的动态加载本质是「DOM 就绪 + 插件实例化 + 数据注入」三阶段协同。优先选用 $(selector).load(url, callback)，它天然保障回调触发前内容已解析并插入文档流；同时始终校验目标元素存在性与 Grid 实例状态，可大幅降低运行时错误风险。
