jQuery将数据加载到jqGrid中。

Question

jQuery将数据加载到jqGrid中。

5

我是首次使用jqGrid的用户，目前已经查看了官方示例。我对使用JSON将数据加载到表格中很感兴趣。

我正在查看"加载数据(JSON Data)"部分： 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选项卡时，它看起来与此相同，请问我做错了什么？

我正在尝试仅加载一条记录以开始工作，但我无法使其正常运行，任何帮助都将不胜感激。

- London

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

首先，你不是第一个遇到理解如何构建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）。如果您的行数较少（例如小于某个数字），则可以在jqGrid中添加loadonce:true参数，使用基于客户端的排序、分页和过滤。但是基于服务器的实现允许您处理具有非常好性能的多百万行数据集。

我建议您阅读我的this answer，我试图解释服务器响应的附加元素“total”、“page”和“records”的用途。参数的值可以以数字或字符串的形式编码为JSON（根据您的喜好）。

如果用户点击“位置”列的列标题，例如jqGrid将在url中发送具有`sidx = location＆sord = asc`的新请求。因此，重要的是要了解，服务器可以被要求为网格提供数据不止一次，而且请求将包含由使用jqGrid的用户选择的某些参数。

通过定义jsonReader（有时对于每个列还需要附加的jsonmap参数），您可以描述服务器响应的结构。使用这些信息，jqGrid读取响应并填充网格。演示表明，使用相应的jsonReader，甚至可以读取原始JSON数据。

我给你的最后一条建议是，在开始时考虑使用loadError事件处理程序，它有助于告知用户服务器报告的错误。在答案中，我展示了如何在ASP.NET MVC的情况下实现它。我自己不使用spring MVC，因此无法直接为您提供如何更好地在spring MVC中实现错误报告的示例，但任何服务器技术的主要思想都是相同的：在出现错误的情况下，服务器应该以具有error HTTP状态码的响应做出回应。在您的loadError事件处理程序的实现中，您需要解码响应并显示有关错误的信息。