Jqgrid-未加载子网格数据_Jqgrid_Subgrid

Jqgrid-未加载子网格数据

jqgrid

Jqgrid-未加载子网格数据,jqgrid,subgrid,Jqgrid,Subgrid,我正在尝试从主网格加载子网格数据。主栅格加载良好，但当我单击一行时，子栅格数据不会加载。不知道我错过了什么。请帮忙下面是我正在使用的代码 <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { var mydata = [], grid = $("#list"); var mainGridPrefix = "s_"; grid.jqGri

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

下面是我正在使用的代码

<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"
    });
});
//]]>

//

您忘了添加索引：子网格中colModel的信息，您还需要注意大写如果名称是大写的，那么索引也应该是大写的，这样jqgrid就知道需要将数据放在哪里。这是固定代码，也是一个链接到

//

谢谢您的回复。我为子网格的ColModel添加了索引信息，但仍然不起作用。json数据似乎也是正确的。您是否确保colmodel和colNames上的名称与正确的大写字母相同？检查下面的示例并尝试模仿它是。colmodel上的名称与jsondata匹配，ColName的值也与colmodel中的名称相同。我使用的是此处所述的实现，但无法填充子网格。

//<![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>