带有“本地"的 jqGrid 子网格；数据 [英] jqGrid Subgrid with "local" Data

问题描述

我正在尝试让我的子网格处理本地数据.但是，当我单击展开时，我只是得到一个加载框，就像网格试图从某个地方提取数据一样.我假设我不需要 subGridUrl，因为主网格的数据类型是 datatype:'local'.还有什么我应该做的吗?

I'm trying to get my subgrid to work with local data. However, when I click expand, I just get a Loading box like the grid is attempting to pull the data from somewhere. I'm assuming I don't need a subGridUrl since the master grid's datatype is datatype:'local'. Is there anything else I should be doing?

推荐答案

没有用本地数据直接定义子网格的方法，但是您可以使用 subGridRowExpanded (子网格作为网格).需要做的只是通过网格的 rowid 从一些内部结构中获取子网格的数据.例如，如果您将子网格映射为

There are no direct way to define subgrid with local data, but you can relatively easy implement the same behavior using subGridRowExpanded (Subgrid as Grid). What one need to do is just to get from some you internal structures the data for the subgrid by the rowid of the grid. For example if you would have subgrids map as

var myGridData = [
        // main grid data
        {id: "m1", col1: "11", col2: "12"},
        {id: "m2", col1: "21", col2: "22"}
    ],
    mySubgrids = {
        m1: [
            // data for subgrid for the id=m1
            {id: "s1a", c1: "aa", c2: "ab", c3: "ac"},
            {id: "s1b", c1: "ba", c2: "bb", c3: "bc"},
            {id: "s1c", c1: "ca", c2: "cb", c3: "cc"}
        ],
        m2: [
            // data for subgrid for the id=m2
            {id: "s2a", c1: "xx", c2: "xy", c3: "xz"}
        ]
    };

在 subGridRowExpanded 中，您可以使用以下代码创建子网格:

Inside of subGridRowExpanded you can create subgrid with the following code:

$("#grid").jqGrid({
    datatype: 'local',
    data: myGridData,
    colNames: ['Column 1', 'Column 2'],
    colModel: [
        { name: 'col1', width: 200 },
        { name: 'col2', width: 200 }
    ],
    ...
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var subgridTableId = subgridDivId + "_t";
        $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: 'local',
            data: mySubgrids[rowId],
            colNames: ['Col 1', 'Col 2', 'Col 3'],
            colModel: [
                { name: 'c1', width: 100 },
                { name: 'c2', width: 100 },
                { name: 'c3', width: 100 }
            ],
            ...
        });
    }
});

演示实时显示结果:

这篇关于带有“本地"的 jqGrid 子网格；数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！