如何用两个独立JSON本地数据匹配ID填充jqGrid主网格与子网格

核心思路 #

主网格直接绑定独立的Maingrid数组，子网格在展开行时，通过主行id匹配Subgrid数组中的idref字段，过滤出对应数据并渲染。

完整代码示例 #

// 示例主网格数据
const Maingrid = [
    {'id': 1, 'first_name': 'Greg', 'last_name': 'JEAN'},
    {'id': 2, 'first_name': 'Anna', 'last_name': 'SMITH'},
    {'id': 3, 'first_name': 'John', 'last_name': 'DOE'}
];

// 示例子网格数据
const Subgrid = [
    {'idref': 1, 'flavour': 'chocolate', 'temp': 'true'},
    {'idref': 1, 'flavour': 'vanilla', 'temp': 'false'},
    {'idref': 2, 'flavour': 'strawberry', 'temp': 'true'},
    {'idref': 3, 'flavour': 'mint', 'temp': 'false'}
];

// 初始化主网格
$("#mainGrid").jqGrid({
    datatype: "local",
    data: Maingrid,
    colNames: ['ID', 'First Name', 'Last Name'],
    colModel: [
        {name: 'id', index: 'id', width: 80, key: true},
        {name: 'first_name', index: 'first_name', width: 150},
        {name: 'last_name', index: 'last_name', width: 150}
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#mainPager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption: "主网格",
    // 启用子网格
    subGrid: true,
    // 行展开时加载子网格数据
    subGridRowExpanded: function(subgridId, rowId) {
        // 构建子网格表格ID
        const subgridTableId = subgridId + "_t";
        $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
        
        // 过滤匹配当前主行ID的子网格数据
        const filteredSubData = Subgrid.filter(item => item.idref == rowId);
        
        // 初始化子网格
        $("#" + subgridTableId).jqGrid({
            datatype: "local",
            data: filteredSubData,
            colNames: ['Flavour', 'Temp'],
            colModel: [
                {name: 'flavour', index: 'flavour', width: 150},
                {name: 'temp', index: 'temp', width: 80}
            ],
            rowNum: 10,
            sortname: 'flavour',
            sortorder: "asc",
            caption: "子网格（ID: " + rowId + "）"
        });
    }
});

关键细节说明 #

• 主网格配置：设置datatype: "local"直接绑定Maingrid数组，同时开启subGrid: true启用子网格功能。
• 子网格数据匹配：在subGridRowExpanded事件中，用当前主行的rowId过滤Subgrid数组，筛选出idref与rowId一致的条目。
• 子网格渲染：动态创建子网格表格，将过滤后的本地数据绑定到子网格完成渲染。

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