Question

我是jQuery和jqGrid的新手，我从另一个系统获得两种类型的JSON内容，格式如下：

选项＃1

{
    "@timestamp": "2012-03-27T16:19:26Z",
    "@toplevelentries": 40000,
    "items": [
        {
            "@entryid": "1-B933790B1DC265ED8025725800728CC5",
            "@unid": "B933790B1DC265ED8025725800728CC5",
            "@noteid": "1E76E",
            "@position": "1",
            "@read": true,
            "@siblings": 40000,
            "$17": "Aaron, Adam",
            "InternetAddress": "consurgo@compleo.net",
            "OfficeCountry": "Namibia"
        },
        {
            "@entryid": "2-9D93E80306A7AA88802572580072717A",
            "@unid": "9D93E80306A7AA88802572580072717A",
            "@noteid": "19376",
            "@position": "2",
            "@read": true,
            "@siblings": 40000,
            "$17": "Aaron, Dave",
            "InternetAddress": "gratia@incito.co.uk",
            "OfficeCountry": "Brazil"
        },
        {
            "@entryid": "3-FAFA753960DB587A80257258007287CF",
            "@unid": "FAFA753960DB587A80257258007287CF",
            "@noteid": "1D842",
            "@position": "3",
            "@read": true,
            "@siblings": 40000,
            "$17": "Aaron, Donnie",
            "InternetAddress": "vociferor@nequities.net",
            "OfficeCountry": "Algeria"
        }
    ]
}

这里我所拥有的jqgrid定义如下：

$().ready(function(){
    jQuery("#list2").jqGrid({
        url:'./xGrid2.xsp/peoplejson',
        datatype: "json",
        colNames:['#','InternetAddress','Name','OfficeCountry'],
        colModel:[
            {name:'@position',index:'@position', width:50, sortable:true},
            {name:'InternetAddress',index:'InternetAddress', width:200, sortable:true},
            {name:'$17',index:'$17', width:200, sortable:true},
            {name:'OfficeCountry',index:'OfficeCountry', width:200, sortable:true}
        ],
        jsonReader: {
            repeatitems: false,
            root: "items",
            id: "@position",
            records: "@toplevelentries", 
            page:2,
            total:5
        },
        sortname: '@position',
        sortorder: "desc",
        height:500,
        rowNum:50,
        rowList:[50,100,150],
        caption:"JSON Example",
        pager: '#pager2'
    });
});

我获取数据但排序和分页无法正常工作。

选项2

[
    {
        "@entryid": "1-B933790B1DC265ED8025725800728CC5",
        "@unid": "B933790B1DC265ED8025725800728CC5",
        "@noteid": "1E76E",
        "@position": "1",
        "@read": true,
        "@siblings": 40000,
        "@form": "Person",
        "$17": "Aaron, Adam",
        "InternetAddress": "consurgo@compleo.net",
        "OfficeCountry": "Namibia"
    },
    {
        "@entryid": "2-9D93E80306A7AA88802572580072717A",
        "@unid": "9D93E80306A7AA88802572580072717A",
        "@noteid": "19376",
        "@position": "2",
        "@read": true,
        "@siblings": 40000,
        "@form": "Person",
        "$17": "Aaron, Dave",
        "InternetAddress": "gratia@incito.co.uk",
        "OfficeCountry": "Brazil"
    },
    {
        "@entryid": "3-FAFA753960DB587A80257258007287CF",
        "@unid": "FAFA753960DB587A80257258007287CF",
        "@noteid": "1D842",
        "@position": "3",
        "@read": true,
        "@siblings": 40000,
        "@form": "Person",
        "$17": "Aaron, Donnie",
        "InternetAddress": "vociferor@nequities.net",
        "OfficeCountry": "Algeria"
    }
]

这里我的jqgrid定义如下：

$().ready(function(){
    jQuery("#list2").jqGrid({
        url:'./xGrid4.xsp/peoplejson',
        datatype: "json",
        colNames:['InternetAddress','Name', 'OfficeCountry'],
        colModel:[
            {name:'InternetAddress',index:'InternetAddress', width:200},
            {name:'$17',index:'$17', width:200},
            {name:'OfficeCountry',index:'OfficeCountry', width:200}
        ],
        jsonReader: {
            repeatitems: false,
            id: "InternetAddress",
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        },
        caption:"JSON Example",
        height:500,
        sortable:true,
        rowNum:250,
        rowList:[250,500,750,1000],
        pager: '#pager2'                            
    });
});

再次不确定我是否正确定义了我的jqrig对象，因为我在JSON上没有根元素。

在两个选项中，排序都不起作用，我无法正确填充Pager元素上的记录和页面总数。

任何帮助将不胜感激。

Answer 1

你有两个主要问题。第一个：排序。这很容易解决。带有datatype: 'json'的jqGrid要求get 只有一页排序数据。如果用户更改排序顺序或转到下一页，例如，带有其他参数的新请求将发送到服务器。

如果您希望数据仅从服务器加载，然后本地排序或分页，您只需添加loadonce: true选项即可网格。您必须返回仍然正确排序的数据，以便最初具有正确的排序顺序。

出于性能原因，您应始终将gridview: true包含在已使用选项列表中。

您可以通过简单的方式解决从服务器返回的两种格式的JSON数据的问题。您可以将jsonReader修改为以下内容：

jsonReader: { repeatitems: false, id: "InternetAddress", root: function (obj) { if ($.isArray(obj)) { return obj; } if ($.isArray(obj.items)) { return obj.items; } return []; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { if ($.isArray(obj)) { return obj.length; } if ($.isArray(obj.items)) { return obj.items.length; } return 0; } }

相应的演示：the first one和the second one使用相同的代码，但读取不同格式的JSON数据（您发布的数据）。两者都产生相同的结果。我将rowNum更改为rowNum: 2以演示本地分页工作。此外，您可以考虑使用height: 'auto'而不是固定值height: 500。您使用的rowNum将定义网格的高度。

另外，我在第二个演示中包含了
行
$("#list2").jqGrid('filterToolbar', {stringResult: true, defaultSearch: 'cn', searchOnEnter: false});

展示local data filtering的力量。我添加了一个选项ignoreCase: true，以便对数据进行不区分大小写的过滤/搜索。

在jqGrid上从JSON获取和排序

1 个答案: