如何在jqGrid中实现主网格同时关联展示两个独立详情网格

这个需求完全可以实现，你当前只能显示单个详情网格，通常是网格ID重复或者主表选中事件只触发了单个详情加载导致的，具体实现如下：

排查前置问题 #

先检查以下两个常见错误：

• 三个网格的table元素ID、分页器ID必须全局唯一，不能重复，jqGrid依赖唯一ID渲染，重复ID会导致后渲染的网格覆盖先渲染的内容
• 公共依赖（jQuery、jqGrid的js/css文件）只在default.php中引入一次，不要在三个网格的php文件里重复引入，重复加载依赖会导致网格初始化失败

具体实现步骤 #

1. 改造主表（案件表）的选中事件 #

在主表WI_CA_Cases_grid.php的jqGrid初始化配置中，修改onSelectRow回调，选中行时同时触发两个详情网格的重载，传入主表选中行的主键ID：

// 主表初始化示例，注意替换为你实际的配置参数
$("#cases_grid").jqGrid({
    url: "你的案件列表接口地址",
    datatype: "json",
    colModel: [
        // 你的列配置，确保主键（案件ID）配置了key: true
        {name: "case_id", index: "case_id", key: true, hidden: true},
        // 其他列
    ],
    pager: "#cases_pager",
    // 其他你已有的配置项
    onSelectRow: function (selectedCaseId) {
        if (!selectedCaseId) return;
        // 重载会话详情网格，传入选中的案件ID
        $("#sessions_grid").jqGrid("setGridParam", {
            postData: { case_id: selectedCaseId },
            page: 1
        }).trigger("reloadGrid");
        // 重载客户详情网格，同时传入选中的案件ID
        $("#clients_grid").jqGrid("setGridParam", {
            postData: { case_id: selectedCaseId },
            page: 1
        }).trigger("reloadGrid");
    }
});

2. 两个详情网格配置调整 #

分别修改WI_CA_Sessions_grid.php和WI_CA_Clients_grid.php的jqGrid配置，确保ID唯一，默认先不加载数据，等待主表传参后再加载：

// 会话网格初始化示例，客户网格配置逻辑一致，替换对应ID和接口即可
$("#sessions_grid").jqGrid({
    url: "你的会话列表接口地址", // 接口接收case_id参数，返回对应案件的会话数据
    datatype: "json",
    postData: { case_id: "" }, // 初始默认不传参数，接口返回空列表即可
    colModel: [
        // 你的会话列配置
    ],
    pager: "#sessions_pager",
    // 其他你已有的配置项
});

3. default.php页面结构调整 #

你现有页面结构无需修改，只需要确保三个网格的容器和内部table、pager的ID不重复即可。

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