jqGrid:加载本地数据类型的嵌套子网格问题 [英] jqGrid : issue loading nested sub grid with local datatype

问题描述

我正在尝试使用嵌套的子网格来将jqGrid与本地数据一起使用.我已经搜索了很多，但是还没有找到解决方案.这是我的代码的简化示例:

I'm trying to get nested subgrids to work using jqGrid with local data. I've searched around quite a bit but haven't been able to find a solution. Here is a simplified sample of my code:

var mainGridData =
    [
        // main grid data
        { id: "m1", col1: "11", col2: "12" },
        { id: "m2", col1: "21", col2: "22" },
        { id: "m3", col1: "31", col2: "32" }
    ];
var firstSubgrid =
    {
        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" }
        ]
    };
var secondSubgrid =
    {
        s1a: [
            // data for subgrid for the id=m1
            { id: "2s1a", d1: "2aa", d2: "2ab", d3: "2ac" },
            { id: "2s1b", d1: "2ba", d2: "2bb", d3: "2bc" },
            { id: "2s1c", d1: "2ca", d2: "2cb", d3: "2cc" }
        ],
        s2a: [
            // data for subgrid for the id=m2
            { id: "2s2a", d1: "xx", d2: "xy", d3: "xz" }
        ]
    };


//------------
$("#grid").jqGrid({
    datatype: 'local',
    data: mainGridData,
    colNames: ['Column 1', 'Column 2'],
    colModel: [
        { name: 'col1', width: 200 },
        { name: 'col2', width: 200 }
    ],
//Subgrid1...
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var subgridTableId = subgridDivId + "_t";
        $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: 'local',
            data: firstSubgrid[rowId],
            colNames: ['Col 1', 'Col 2', 'Col 3'],
            colModel: [
                { name: 'c1', width: 100 },
                { name: 'c2', width: 100 },
                { name: 'c3', width: 100 }
            ],
      //Subgrid2...    
            subGrid: true,
            subGridRowExpanded: function (subgrid2DivId, subRowId2) {
                var subgrid2TableId = subgrid2DivId + "_t";
                $("#" + subgrid2DivId).html("<table id='" + subgrid2DivId + "'></table>");
                $("#" + subgrid2TableId).jqGrid({
                    datatype: 'local',
                    data: secondSubgrid[subRowId2],
                    colNames: ['Col 1', 'Col 2', 'Col 3'],
                    colModel: [
                        { name: 'd1', width: 100 },
                        { name: 'd2', width: 100 },
                        { name: 'd3', width: 100 }
                    ],
                });

            }                
        });
    }
});

那里有什么主意吗?

推荐答案

我发现您的问题很有趣.我认为答案可能对许多其他人有帮助.所以我写了两个演示，演示了如何实现需求.

I find your question interesting. I think the answer could be helpful for many other people. So I wrote two demos where I demonstrate how the requirements could be implemented.

第一个演示基于我以前的答案(基于另一个)，您在问题文字中已经使用了哪个代码.我从答案中添加了技巧，以便为没有子网格的行隐藏子网格图标("+").

The first demo are base on the demo from my previous answer (which are based in another one) which code you use already used in the text of your question. I added the trick from the answer additionally to hide the subgrid icon ("+") for the rows which has no subgrids.

为了简化对子网格数据的保存，我在每行subgrid属性中添加了哪些值是该子网格的数据.保留数据的方式非常实用，因为jqGrid保存了行的全部内容，因此您不再需要任何隐藏的列.为了访问本地数据，我建议使用getLocalRow方法.例如，请参见答案，以获取其他信息或

To simplify the holding of subgrid data I added in every row subgrid property which value are the data for the subgrid. The kind of holding the data is very practical because jqGrid save full items of the row so you don't need any hidden columns more. To access to the local data I recommend to use getLocalRow method. See the answer for example for additional information or the source code of getLocalRow method which is very simple.

第一个演示的代码:

var myData = [
        // main grid data
        { id: "m1", col1: "11", col2: "12",
            subgrid: [
                // data for subgrid for the id=m1
                { id: "s1a", c1: "aa", c2: "ab", c3: "ac",
                    subgrid: [
                        // data for subgrid for the id=m1, subgridId=s1a
                        { id: "2s1a", d1: "2aa", d2: "2ab", d3: "2ac" },
                        { id: "2s1b", d1: "2ba", d2: "2bb", d3: "2bc" },
                        { id: "2s1c", d1: "2ca", d2: "2cb", d3: "2cc" }
                    ]},
                { id: "s1b", c1: "ba", c2: "bb", c3: "bc" },
                { id: "s1c", c1: "ca", c2: "cb", c3: "cc" }
            ]},
        { id: "m2", col1: "21", col2: "22",
            subgrid: [
                // data for subgrid for the id=m2
                { id: "s2a", c1: "xx", c2: "xy", c3: "xz",
                    subgrid: [
                        // data for subgrid for the id=m2, subgridId=s2a
                        { id: "2s2a", d1: "xx", d2: "xy", d3: "xz" }
                    ]}
            ]},
        { id: "m3", col1: "31", col2: "32" }
    ],
    removeSubgridIcon = function () {
        var $this = $(this);
        $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () {
            var rowData = $this.jqGrid("getLocalRow",
                    $(this).closest("tr.jqgrow").attr("id"));
            return rowData.subgrid == null;
        }).unbind("click").html("");
    },
    isHasSubrids = function (data) {
        var l = data.length, i;
        for (i = 0; i < l; i++) {
            if (data[i].subgrid != null) {
                return true;
            }
        }
        return false;
    };

$("#list").jqGrid({
    datatype: "local",
    data: myData,
    colNames: ["Column 1", "Column 2"],
    colModel: [
        { name: "col1", width: 200 },
        { name: "col2", width: 200 }
    ],
    gridview: true,
    rownumbers: true,
    autoencode: true,
    sortname: "col1",
    sortorder: "desc",
    height: "100%",
    pager: "#pager",
    caption: "Demonstrate how to create subgrid from local hierarchical data",
    subGrid: isHasSubrids(myData),
    loadComplete: function () {
        removeSubgridIcon.call(this);
    },
    subGridRowExpanded: function (subgridDivId1, rowId1) {
        var $subgrid1 = $("<table id='" + subgridDivId1 + "_t'></table>"),
            localRowData1 = $(this).jqGrid("getLocalRow", rowId1);
        $subgrid1.appendTo("#" + $.jgrid.jqID(subgridDivId1));
        $subgrid1.jqGrid({
            datatype: "local",
            data: localRowData1.subgrid,
            colNames: ["Colunm1", "Colunm2", "Colunm3"],
            colModel: [
                { name: "c1", width: 112 },
                { name: "c2", width: 112 },
                { name: "c3", width: 112 }
            ],
            gridview: true,
            rownumbers: true,
            autoencode: true,
            sortname: "c1",
            sortorder: "desc",
            height: "100%",
            loadComplete: removeSubgridIcon,
            subGrid: isHasSubrids(localRowData1.subgrid),
            subGridRowExpanded: function (subgridDivId2, rowId2) {
                var $subgrid2 = $("<table id='" + subgridDivId2 + "_t'></table>"),
                    localRowData2 = $(this).jqGrid("getLocalRow", rowId2);
                $subgrid2.appendTo("#" + $.jgrid.jqID(subgridDivId2));
                $subgrid2.jqGrid({
                    datatype: "local",
                    data: localRowData2.subgrid,
                    colNames: ["Col 1", "Col 2", "Col 3"],
                    colModel: [
                        { name: "d1", width: 90 },
                        { name: "d2", width: 90 },
                        { name: "d3", width: 90 }
                    ],
                    gridview: true,
                    rownumbers: true,
                    autoencode: true,
                    sortname: "d1",
                    sortorder: "desc",
                    height: "100%",
                    subGrid: isHasSubrids(localRowData2.subgrid),
                    loadComplete: removeSubgridIcon
                });
            }
        });
    }
});

第二个演示是对先前演示的更深层次的修改.它可以用于创建非常深的多层子网格的情况.我在演示中额外使用了密集的idPrefix来简化ID的使用.我建议在第一个演示和第二个演示中比较myData数组项的id属性值.下面是第二个演示的代码

The second demo is more deep modifications of the previous demo. It can be used in case of creating really deep multilevel subgrids. I used in the demo additionally intensive idPrefix to simplify working with ids. I recommend to compare values of id properties of items of myData array in the first demo and in the second one. The code of the second demo is below

var myData = [
        // main grid data
        { id: "1", col1: "11", col2: "12",
            subgrid: [
                // data for subgrid for the id=m1
                { id: "1", c1: "aa", c2: "ab", c3: "ac",
                    subgrid: [
                        // data for subgrid for the id=m1, subgridId=s1a
                        { id: "1", d1: "2aa", d2: "2ab", d3: "2ac" },
                        { id: "2", d1: "2ba", d2: "2bb", d3: "2bc" },
                        { id: "3", d1: "2ca", d2: "2cb", d3: "2cc" }
                    ]},
                { id: "2", c1: "ba", c2: "bb", c3: "bc" },
                { id: "3", c1: "ca", c2: "cb", c3: "cc" }
            ]},
        { id: "2", col1: "21", col2: "22",
            subgrid: [
                // data for subgrid for the id=m2
                { id: "1", c1: "1xx", c2: "1xy", c3: "1xz",
                    subgrid: [
                        // data for subgrid for the id=m2, subgridId=s2a
                        { id: "1", d1: "2xx", d2: "2xy", d3: "2xz" }
                    ]}
            ]},
        { id: "3", col1: "31", col2: "32" }
    ],
    removeSubgridIcon = function () {
        var $this = $(this),
            idPrefix = $this.jqGrid("getGridParam", "idPrefix");
        $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () {
            var rowData = $this.jqGrid("getLocalRow",
                    $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id")));
            return rowData.subgrid == null;
        }).unbind("click").html("");
    },
    isHasSubrids = function (data) {
        var l = data.length, i;
        for (i = 0; i < l; i++) {
            if (data[i].subgrid != null) {
                return true;
            }
        }
        return false;
    },
    specificGridOptions = [
        {
            colNames: ["Column 1", "Column 2"],
            colModel: [
                { name: "col1" },
                { name: "col2" }
            ],
            cmTemplate: { width: 200 },
            sortname: "col1",
            sortorder: "desc",
            idPrefix: "s_",
            pager: "#pager",
            caption: "Demonstrate how to create subgrid from local hierarchical data"
        },
        {
            colNames: ["Colunm1", "Colunm2", "Colunm3"],
            colModel: [
                { name: "c1" },
                { name: "c2" },
                { name: "c3" }
            ],
            cmTemplate: { width: 112 },
            sortname: "c1",
            sortorder: "desc"
        },
        {
            colNames: ["Col 1", "Col 2", "Col 3"],
            colModel: [
                { name: "d1" },
                { name: "d2" },
                { name: "d3" }
            ],
            cmTemplate: { width: 90 },
            sortname: "d1",
            sortorder: "desc"
        }
    ],
    commonGridOptions = {
        datatype: "local",
        gridview: true,
        rownumbers: true,
        autoencode: true,
        height: "100%",
        loadComplete: function () {
            // one can use loadComplete: removeSubgridIcon, but I included
            // curent implementation of loadComplete only to show how to call
            // removeSubgridIcon from your loadComplete callback handler
            removeSubgridIcon.call(this);
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                subgridLevel = $(this).jqGrid("getGridParam", "subgridLevel") + 1,
                parentIdPrefix = $(this).jqGrid("getGridParam", "idPrefix"),
                pureRowId = $.jgrid.stripPref(parentIdPrefix, rowId),
                localRowData = $(this).jqGrid("getLocalRow", pureRowId);
            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions[subgridLevel], {
                data: localRowData.subgrid,
                subGrid: isHasSubrids(localRowData.subgrid),
                subgridLevel: subgridLevel,
                idPrefix: rowId + "_",
                rowNum: 10000 // we use this to have no pager in the subgrids
            }));
        }
    };

$("#list").jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions[0], {
    data: myData,
    subgridLevel: 0,
    subGrid: isHasSubrids(myData)
}));

这篇关于jqGrid:加载本地数据类型的嵌套子网格问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！