3

网格.jsp：

<html>
<head>
    <title>jqGrid Example Part 1</title>
    <link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css"/>
    <link rel="stylesheet" href="ui.jqgrid.css" type="text/css"/>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="grid.locale-en.js" type="text/javascript"></script>
    <script src="jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function getGrid() {
            alert("I was here");
            var jqDataUrl = 'getData.action';
            // Set up the jquery grid
            $("#jqTable").jqGrid({
                // Ajax related configurations
                url        : jqDataUrl,
                datatype   : "json",
                gridModel  : "gridModel",
                // Specify the column names
                colNames   : ["id", "name"],
                // Configure the columns
                colModel   : [
                    { name: "id", index: "id", width: 40, align: "left" },
                    { name: "name", index: "name", width: 100, align: "left" }
                ],
                // Grid total width and height
                width      : 550,
                height     : 200,
                // Paging
                toppager   : true,
                pager      : $("#jqTablePager"),
                rowNum     : 5,
                rowList    : [5, 10, 20],
                viewrecords: true, // Specify if "total number of records" is displayed
                // Default sorting
                sortname   : "Id",
                sortorder  : "asc",
                // Grid caption
                caption    : "A Basic jqGrid - Read Only"
            }).navGrid("#jqTablePager",
                    { refresh: true, add: false, edit: false, del: false },
                    {}, // settings for edit
                    {}, // settings for add
                    {}, // settings for delete
                    {sopt: ["cn"]} // Search options. Some options can be set on column level
            );

            alert("out");
        }
    </script>
</head>
<body onload="getGrid();">
<div>
    <p>hi</p>
    <table id="jqTable" class="scroll">
    </table>
    <div id="jqTablePager"></div>
</div>
</body>
</html>

我Struts.xml的是这样的

<action name="getData" class="net.viralpatel.contact.view.ContactAction" method="getData">
<result name="success" type="json" >gird.jsp</result>          
</action>

当我执行为时，我可以看到 jsongetData.action结果

{
    "data"        : "success",
    "gridModel"   : [
        {"id": 1, "name": "akhilesh"},
        {"id": 0, "name": null}
    ],
    "page"        : 1,
    "records"     : 2,
    "rows"        : 2,
    "searchField" : null,
    "searchOper"  : null,
    "searchString": null,
    "sidx"        : null,
    "sord"        : null,
    "total"       : 2
}

我无法在我的 Grid..gridModel 中获取值已正确映射到我的表..

4

1 回答 1

1

而不是定义：

gridModel: "gridModel"

做：

jsonReader : {
    repeatitems: false,
    root       : "gridModel"
},                // Specify the column names

所以它应该是：

$("#jqTable").jqGrid({
    // Ajax related configurations
    url        : "data.json",
    datatype   : "json",
    jsonReader: {
        repeatitems: false,
        root       : "gridModel"
    },                // Specify the column names
    colNames   : ["id", "name"],
    // Configure the columns
    colModel   : [
        { name: "id", index: "id", width: 40, align: "left" },
        { name: "name", index: "name", width: 100, align: "left" }
    ],
    // Grid total width and height
    width      : 550,
    height     : 200,
    // Paging
    toppager   : true,
    pager      : $("#jqTablePager"),
    rowNum     : 5,
    rowList    : [5, 10, 20],
    viewrecords: true, // Specify if "total number of records" is displayed
    // Default sorting
    sortname   : "Id",
    sortorder  : "asc",
    // Grid caption
    caption    : "A Basic jqGrid - Read Only"
}).navGrid("#jqTablePager",
        { refresh: true, add: false, edit: false, del: false },
        {}, // settings for edit
        {}, // settings for add
        {}, // settings for delete
        {sopt: ["cn"]} // Search options. Some options can be set on column level
);
于 2013-01-20T17:18:31.817 回答