【问题标题】:Jqgrid - subgrid data not loadingJqgrid - 未加载子网格数据
【发布时间】:2013-03-01 15:01:47
【问题描述】:

我正在尝试从主网格加载子网格数据。主网格加载正常,但是当我单击一行时,子网格数据不加载。 不知道我错过了什么。请帮忙。

下面是我正在使用的代码。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
    var mydata = [],
        grid = $("#list");
    var mainGridPrefix = "s_";

    grid.jqGrid({
        url: '${recordsUrl}',
        datatype: 'json',
        ignoreCase: true,
        mtype: 'GET',
        colNames: ['Global Search', 'serverId', 'DeviceName', 'Description', 'Console', 'OS', 'Business Unit', 'Model', 'Manufacturer', 'Serial Number', 'LifeCycle', 'Tier'],
        colModel: [{
            name: 'globalSearch',
            index: 'globalSearch',
            width: 50,
            hidden: true,
            searchoptions: {
                searchhidden: true
            }
        }, {
            name: 'serverId',
            index: 'serverId',
            width: 10,
            hidden: true
        }, {
            name: 'deviceName',
            index: 'deviceName',
            width: 50
        }, {
            name: 'serverDesc',
            index: 'serverDesc',
            width: 70
        }, {
            name: 'console',
            index: 'console',
            width: 50
        }, {
            name: 'groupName',
            index: 'groupName',
            width: 40
        }, {
            name: 'businessUnit',
            index: 'businessUnit',
            width: 30
        }, {
            name: 'model',
            index: 'model',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'manufacturer',
            index: 'manufacturer',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'serialNumber',
            index: 'serialNumber',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'lifeCycle',
            index: 'lifeCycle',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'tier',
            index: 'tier',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }],
        postData: {},
        rowNum: 10,
        rowList: [10, 20, 40, 60],
        height: 'auto',
        autowidth: true,
        rownumbers: true,
        pager: '#pager',
        sortname: 'deviceName',
        viewrecords: true,
        sortorder: "asc",
        caption: "Records",
        emptyrecords: "Empty records",
        idPrefix: mainGridPrefix,
        loadonce: true,
        loadComplete: function () {},
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "serverId"
        },
        subGrid: true,
        beforeProcessing: function (data) {
            var rows = data.rows,
                l = rows.length,
                i, item, subgrids = {};
            for (i = 0; i < l; i++) {
                item = rows[i];
                if (item.apps) {
                    subgrids[item.id] = item.apps;
                }
            }
            data.userdata = subgrids;
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                subgrids = $(this).jqGrid("getGridParam", "userData");

            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: subgrids[pureRowId],
                colNames: ["App Id", "Desc"],
                colModel: [{
                    name: "appId"
                }, {
                    name: "applicationDesc"
                }],
                sortname: "applicationDesc",
                height: "100%",
                rowNum: 10000,
                autoencode: true,
                autowidth: true,
                jsonReader: {
                    repeatitems: false,
                    id: "appId"
                },
                gridview: true,
                idPrefix: rowId + "_"
            });
        }

    });


    $("#search").click(function () {
        var searchFiler = $("#filter").val(),
            f;

        if (searchFiler.length === 0) {
            grid[0].p.search = false;
            $.extend(grid[0].p.postData, {
                filters: ""
            });
        }
        f = {
            groupOp: "OR",
            rules: []
        };
        f.rules.push({
            field: "globalSearch",
            op: "cn",
            data: searchFiler
        });
        f.rules.push({
            field: "deviceName",
            op: "cn",
            data: searchFiler
        });
        grid[0].p.search = true;
        $.extend(grid[0].p.postData, {
            filters: JSON.stringify(f)
        });
        grid.trigger("reloadGrid", [{
            page: 1,
            current: true
        }]);
    });

    grid.jqGrid('navGrid', '#pager', {
        edit: false,
        add: false,
        del: false,
        search: true,
        view: true
    }, {}, {}, {}, { // search
        sopt: ['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
        closeOnEscape: true,
        multipleSearch: true,
        closeAfterSearch: true
    }, { // vew options
        beforeShowForm: function (form) {
            $("tr#trv_id", form[0]).show();
        },
        afterclickPgButtons: function (whichbutton, form, rowid) {
            $("tr#trv_id", form[0]).show();
        }
    });

    grid.navButtonAdd('#pager', {
        caption: "Add",
        buttonicon: "ui-icon-plus",
        onClickButton: addRow,
        position: "last",
        title: "",
        cursor: "pointer"
    });

    grid.navButtonAdd('#pager', {
        caption: "Edit",
        buttonicon: "ui-icon-pencil",
        onClickButton: editRow,
        position: "last",
        title: "",
        cursor: "pointer"
    });

    grid.navButtonAdd('#pager', {
        caption: "Delete",
        buttonicon: "ui-icon-trash",
        onClickButton: deleteRow,
        position: "last",
        title: "",
        cursor: "pointer"
    });
});
//]]>

【问题讨论】:

    标签: jqgrid subgrid


    【解决方案1】:

    你忘了添加索引:子网格中colModel的信息,如果名称是大写的,你还需要注意大写,那么索引应该是这样,这样jqgrid就知道它需要把数据放在哪里.这是固定代码,也是working example的链接

    //<![CDATA[
    $(document).ready(function () {
    var mydata = [{
        globalsearch: "1",
        serverId: "Test Name1",
        deviceName: "Test Address1",
        Console: "Test Date1"
    }, {
        globalsearch: "2",
        serverId: "Test Name2",
        deviceName: "Test Address2",
        Console: "Test Date2"
    }, {
        globalsearch: "3",
        serverId: "blah",
        deviceName: "hello",
        Console: "basketball"
    }];
    grid = $("#list");
    
    
    var mydata2 = [{
        AppId: "1",
        Desc: "Test Name1"
    }, {
        AppId: "2",
        Desc: "Test Name2"
    }, {
        AppId: "3",
        Desc: "blah"
    }];
    var mainGridPrefix = "s_";
    
    grid.jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['globalsearch', 'serverId', 'deviceName', 'Description', 'Console', 'OS', 'Business Unit', 'Model', 'Manufacturer', 'Serial Number', 'LifeCycle', 'Tier'],
        colModel: [{
            name: 'globalsearch',
            index: 'globalsearch',
            width: 50,
        }, {
            name: 'serverId',
            index: 'serverId',
            width: 10,
            hidden: false
        }, {
            name: 'deviceName',
            index: 'deviceName',
            width: 50
        }, {
            name: 'serverDesc',
            index: 'serverDesc',
            width: 70
        }, {
            name: 'Console',
            index: 'Console',
            width: 50
        }, {
            name: 'groupName',
            index: 'groupName',
            width: 40
        }, {
            name: 'businessUnit',
            index: 'businessUnit',
            width: 30
        }, {
            name: 'model',
            index: 'model',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'manufacturer',
            index: 'manufacturer',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'serialNumber',
            index: 'serialNumber',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'lifeCycle',
            index: 'lifeCycle',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }, {
            name: 'tier',
            index: 'tier',
            width: 30,
            editable: true,
            editrules: {
                required: true,
                edithidden: true
            },
            hidden: true,
            editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }],
        rowNum: 10,
        rowList: [10, 20, 40, 60],
        rownumbers: true,
        pager: '#pager',
        sortname: 'deviceName',
        viewrecords: true,
        sortorder: "asc",
        caption: "Records",
        height: 'auto',
        autowidth: true,
        loadComplete: function () {},
        subGrid: true,
        beforeProcessing: function (data) {
            var rows = data.rows,
                l = rows.length,
                i, item, subgrids = {};
            for (i = 0; i < l; i++) {
                item = rows[i];
                if (item.apps) {
                    subgrids[item.id] = item.apps;
                }
            }
            data.userdata = subgrids;
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                subgrids = $(this).jqGrid("getGridParam", "userData");
    
            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: mydata2,
                colNames: ["AppId", "Desc"],
                colModel: [{
                    name: "AppId",
                    index: "AppId"
                }, {
                    name: "Desc",
                    index: "Desc"
                }],
                sortname: "applicationDesc",
                height: "100%",
                rowNum: 10000,
                autoencode: true,
                autowidth: true,
                jsonReader: {
                    repeatitems: false,
                    id: "appId"
                },
                gridview: true,
                idPrefix: rowId + "_"
            });
        }
    
    });
    
    
    $("#search").click(function () {
        var searchFiler = $("#filter").val(),
            f;
    
        if (searchFiler.length === 0) {
            grid[0].p.search = false;
            $.extend(grid[0].p.postData, {
                filters: ""
            });
        }
        f = {
            groupOp: "OR",
            rules: []
        };
        f.rules.push({
            field: "globalSearch",
            op: "cn",
            data: searchFiler
        });
        f.rules.push({
            field: "deviceName",
            op: "cn",
            data: searchFiler
        });
        grid[0].p.search = true;
        $.extend(grid[0].p.postData, {
            filters: JSON.stringify(f)
        });
        grid.trigger("reloadGrid", [{
            page: 1,
            current: true
        }]);
    });
    
    grid.jqGrid('navGrid', '#pager', {
        edit: false,
        add: false,
        del: false,
        search: true,
        view: true
    }, {}, {}, {}, { // search
        sopt: ['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
        closeOnEscape: true,
        multipleSearch: true,
        closeAfterSearch: true
    }, { // vew options
        beforeShowForm: function (form) {
            $("tr#trv_id", form[0]).show();
        },
        afterclickPgButtons: function (whichbutton, form, rowid) {
            $("tr#trv_id", form[0]).show();
        }
    });
    
    grid.navButtonAdd('#pager', {
        caption: "Add",
        buttonicon: "ui-icon-plus",
        onClickButton: addRow,
        position: "last",
        title: "",
        cursor: "pointer"
    });
    
    grid.navButtonAdd('#pager', {
        caption: "Edit",
        buttonicon: "ui-icon-pencil",
        onClickButton: editRow,
        position: "last",
        title: "",
        cursor: "pointer"
    });
    
    grid.navButtonAdd('#pager', {
        caption: "Delete",
        buttonicon: "ui-icon-trash",
        onClickButton: deleteRow,
        position: "last",
        title: "",
        cursor: "pointer"
    });
    });
    //]]>
    
    
    
    <table id="list"></table>
    <div id="pager"></div>
    

    【讨论】:

    • 感谢您的回复。我为子网格的 ColModel 添加了索引信息,但它仍然不起作用。不过,json 数据似乎也是正确的。
    • 您是否确保 colmodel 和 colNames 上的名称与正确的大小写相同?查看以下示例并尝试模仿它jsfiddle.net/RQtjZ
    • 是的。colmodel 上的名称与 jsondata 匹配,colNames 的值也与 colmodel 中的名称相同。
    • 我正在使用此处描述的实现ok-soft-gmbh.com/jqGrid/Adofo.htm,但无法填充子网格。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-28
    相关资源
    最近更新 更多