javascript – jQuery将数据加载到jqGrid中

前端之家收集整理的这篇文章主要介绍了javascript – jQuery将数据加载到jqGrid中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

jQuery("#list2").jqGrid(
    {
        url : '

${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选项卡时,它看起来都像这样,任何想法我做错了什么?

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

最佳答案
首先,您不是第一个理解如何构造JSON数据,从jqGrid发送到服务器的参数是什么等问题的人. The official jqGrid documentation没有足够的介绍,因此jqGrid使用的第一步可能比预期的要困难一些.

来自服务器的JSON响应中存在的问题是它只包含一个数据项而不是表示网格行的项的数组(或列表).数据至少应该是

[
    {
        "id": 1,"type": "read-only"
    }
]

或者更好

{
    "total": 1,"page": 1,"records": 1,"rows": [
        {
            "id": 1,"quarter": 500,"type": "read-only" 
        } 
    ]
}

甚至是

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

要么

{
    "total": 1,"rows": [
        [ "1","read-only" ] 
    ]
}

乍一看JSON数据这种奇怪的原因是jqGrid旨在支持在服务器上实现的数据的分页,排序和过滤/搜索.所以参数rows = 10& page = 1& sidx = id& sord = desc from url发送到服务器意味着jqGrid要求服务器获取数据的第一页(page = 1),页面有10行每页(行= 10).数据应先按id(sidx = id)按降序排序(sord = desc).如果您的行数很少(例如,在一些hundert下),您可以使用基于客户端的排序,分页和过滤,如果您添加了jonGrid的loadonce:true参数,但基于服务器的实现允许您使用具有许多数据的真正大型数据集数十万行数据具有非常好的性能.

我建议你阅读我的this answer,我试图解释如何使用服务器响应“total”,“page”和“records”的附加元素.参数的值可以用JSON编码为数字或字符串(根据您的口味).

如果用户点击“位置”列的列标题,例如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相关文章