Question

我正在尝试使用 JQGrid 从jsp响应中加载JSON的数据。

我的index.html

<pre>
<script type="text/javascript" src="jqgrid/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jqgrid/src/grid.loader.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
</pre>

function getEmployeeDetails(){
   jQuery("#list").jqGrid({
     datatype: function(postdata) {
            jQuery.ajax({
                 url: 'execute.jsp?command=command',
                 mtype:'POST',
                 datatype:"json",
                     colModel : [
                     {name:'amount', width:30, sortable:true, align:'center'},
                     {name:'age', width:40, sortable:false, align:'center'},
                     {name:'name', width:180, sortable:true, align:'left'},
                     {name:'total', width:380, sortable:true, align:'left'}
                     ],

                   jsonReader : {
                         root: "key",
                         page: "currentpage",
                         total: "total",
                         records: "totalrecords",
                         repeatitems: true,
                         cell: "cell",
                         id: "id",
                         userdata: "userdata" 
                         }, 
                         width: 700,
                         height: 200,

                   pager: '#pager',
                   sortorder: 'desc',
                   viewrecords: true,
                   caption: 'My first grid'
            });
           }
   });
}

我的 execute.jsp 代码

**<pre>
response.setContentType("application/json");
response.getWriter().write(wr.toJSONString());
</pre>**

我的JSON string从java对象生成。

{
    "totalrecords":"20",
    "tota1":"10",
    "currentpage":"runCommand.jsp",
    "key":[
    {"id":"1","cell":["12000","30","Myname","10000"]}
    ]
}

数据未加载到表中。我试着以不同的方式取得成功。总是桌子空着，说装载.....请帮帮我。这里有什么不对......

Answer 1

您以错误的方式使用datatype。你不需要手动调用jQuery.ajax jqGrid会为你做这个。 JavaScript代码可以是以下内容：

$(document).ready(function() {
    $("#list").jqGrid({
        url: 'execute.jsp?command=command',
        mtype:'POST',
        datatype:"json",
        colModel : [
             {name:'amount', width:30, align:'center'},
             {name:'age', width:40, sortable:false, align:'center'},
             {name:'name', width:180},
             {name:'total', width:380}
        ],
        jsonReader : {
            root: "key",
            page: "currentpage",
            total: "total",
            records: "totalrecords"
        },
        width: 700,
        height: 200, // the value 'auto' could be probably better
        pager: '#pager',
        sortorder: 'desc',
        viewrecords: true,
        caption: 'My first grid'
    });
});

参见演示here。您应该将JSON数据中的值"currentpage":"runCommand.jsp"更正为某个数值，例如"currentpage":"1"。

JQGrid数据未加载JSON服务器响应

1 个答案: