jQuery将数据加载到jqGrid中

Question

我是jqGrid的第一次用户,到目前为止我通过官方示例,我有兴趣使用json将数据加载到网格中.

我目前正在查看,正在加载数据(JSON数据):http: //trirand.com/blog/jqgrid/jqgrid.html

这里有一些创建网格的javascript:

jQuery("#list2").jqGrid(
    {
        url : '<c:url value="${webappRoot}/getdetails" />',
        datatype : "json",
        colNames : [ 'id', 'Location', 'Country Code', 'Type', 'Interval',
                     'Version', 'Last Active', 'Last Login', 'NOTE' ],
        colModel : [
            { name : 'id', width : 10 },
            { name : 'location', width : 75 },
            { name : 'countryCode', width : 50 },
            { name : 'type', width : 40 },
            { name : 'interval', width : 30 },
            { name : 'version', width : 45 },
            { name : 'lastactive', width : 50, align : "right" },
            { name : 'lastlogin', width : 50, sortable : false },
            { name : 'note', width : 50, sortable : false}
        ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        pager : '#pager2',
        width: gridWidth,
        sortname : 'id',
        viewrecords : true,
        sortorder : "desc",
        caption : "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
                        { edit : false, add : false, del : false});

${webappRoot}/getdetails转换到我的项目的路径http://localhost/myProject/getdetails,我正在使用spring MVC(它可能是无关紧要的).

当我查看firebug时,会生成此http请求:

GET http://localhost/newProject/getdetails?_search=false&nd=1304638787511&rows=10&page=1&sidx=id&sord=desc  
200 OK
135ms

以下是回复:

{
    "id": 1,
    "location": "office_2782",
    "countryCode": "UK",
    "quarter": "500",
    "version": "v3.05",
    "lastactive": "yesterday",
    "lastlogin": "today",
    "note": "no note",
    "type": "read-only"
}

当我导航到JSON选项卡时,它看起来都像这样,任何想法我做错了什么？

我正在尝试只加载一条记录作为开始,我无法让它正常工作,任何帮助都是适当的.

Answer 1

首先，您不是第一个在理解 JSON 数据应如何构造、从 jqGrid 发送到服务器的参数含义等方面存在问题的人。官方的 jqGrid 文档没有包含足够的介绍，因此 jqGrid 使用的第一步可能比预期的要困难一些。

来自服务器的 JSON 响应中存在的问题是它仅包含一项数据，而不是表示网格行的项目数组（或列表）。数据应该至少是

[
    {
        "id": 1,
        "location": "office_2782",
        "countryCode": "UK",
        "quarter": "500",
        "version": "v3.05",
        "lastactive": "yesterday",
        "lastlogin": "today",
        "note": "no note",
        "type": "read-only"
    }
]

或者更好的是

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        {
            "id": 1,
            "location": "office_2782",
            "countryCode": "UK",
            "quarter": 500,
            "version": "v3.05",
            "lastactive": "yesterday",
            "lastlogin": "today",
            "note": "no note",
            "type": "read-only" 
        } 
    ]
}

甚至作为

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        {
            "id": 1,
            "row": [ "1", "office_2782", "UK", "500", "v3.05",
                     "yesterday", "today", "no note", "read-only" ] 
        } 
    ]
}

或者

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        [ "1", "office_2782", "UK", "500",  "v3.05", "yesterday", "today",
          "no note", "read-only" ] 
    ]
}

JSON数据乍一看如此奇怪的原因是jqGrid被设计为支持在服务器上实现的数据分页、排序和过滤/搜索。因此，发送到服务器的 url 中的参数rows=10&page=1&sidx=id&sord=desc意味着 jqGrid 要求服务器获取数据的第一页（page=1），该页面每页有 10 行（rows=10）。数据应事先按id(sidx=id) 降序 (sord=desc) 排序。如果您的行数较少（例如，在一些 hundert 下），如果您添加loadonce:truejqGrid 的参数，则可以使用基于客户端的排序、分页和过滤，但是基于服务器的实现允许您处理具有数十万行的非常大的数据集的数据具有非常好的性能。

我建议您阅读我的这个答案，其中我试图解释如何使用服务器响应“总计”、“页面”和“记录”的附加元素。参数的值可以在 JSON 中编码为数字或字符串（根据您的喜好）。

例如，如果用户单击“位置”列的列标题，jqGrid 将向url 中包含的服务器发送新请求。sidx=location&sord=asc因此，重要的是要理解，服务器可以被要求为网格提供数据，而不是每个网格一次，而是多次，并且请求将包含使用 jqGrid 的用户选择的一些参数。

定义jsonReader（有时是jsonmap每列的附加参数）描述服务器响应的结构。使用 jqGrid 信息读取响应并填充网格。

该演示表明，通过相应的操作，jsonReader您甚至可以读取原始 JSON 数据。

我给您的最后一个建议是在开始时考虑使用loadError事件句柄，这有助于通知用户服务器报告的错误。在答案中，我展示了如何在 ASP.NET MVC 的情况下实现它。我自己不使用 Spring MVC，所以我不能给你直接的例子来说明如何在 Spring MVC 中更好地实现错误报告，但主要思想在任何服务器技术中都是相同的：如果出现错误，服务器应该响应具有错误 HTTP 状态代码的响应。在loadError事件处理的实现内部，您可以解码响应并显示有关错误的信息。