具有“本地"功能的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(

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屋！