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发送到服务器的参数是什么等问题的人。 The official jqGrid documentation没有足够的介绍，因此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要求服务器获取数据的第一页（页面= 1），页面每页有10行（行= 10）。数据应先按id（sidx = id）按降序排序（sord = desc）。如果您的行数很少（例如，在某些hundert下），如果添加jqGrid的loadonce:true参数，则可以使用基于客户端的排序，分页和过滤，但基于服务器的实现允许您使用非常大的数据集拥有数十万行数据并具有非常好的性能。

我建议你阅读我的this answer，我试图解释服务器响应“total”，“page”和“records”的其他元素将如何使用。参数的值可以用数字或字符串编码（根据您的口味）。

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

为每个列定义jsonReader（有时还有其他jsonmap个参数），您将描述服务器响应的结构。使用信息jqGrid读取响应并填充网格。

The demo表明，使用相应的jsonReader，您甚至可以阅读原始的JSON数据。

我的最后建议是在开始时考虑使用loadError事件句柄，这有助于告知用户服务器报告的错误。在the answer中，我已经展示了如何在ASP.NET MVC的情况下实现它。我自己不使用spring MVC，所以我不能直接举例说明如何在spring MVC中更好地实现错误报告，但主要思想在任何服务器技术中都是一样的：如果出现错误，服务器应该响应响应有error HTTP status code。在您的loadError事件句柄实现中，您可以解码响应并显示有关错误的信息。

jQuery将数据加载到jqGrid中

1 个答案: