Получение и сортировка из JSON на jqGrid

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

У вас есть две основные проблемы. Первый: сортировка. Это очень легко решить. jqGrid с datatype: 'json' запрашивает у только одну страницу отсортированных данных . Если пользователь изменит порядок сортировки или перейдет, например, на следующую страницу, новый запрос с другими параметрами будет отправлен на сервер.

Если вы хотите, чтобы данные загружались только один раз с сервера , а затем были локально отсортированы или разбиты на страницы, вам нужно просто добавить опцию 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;
    }
}

Соответствующие демонстрации: первый и второй используют один и тот же код, но читают разные отформатированные данные JSON (данные, которые вы разместили). Оба дают одинаковые результаты. Я изменил rowNum на rowNum: 2, чтобы продемонстрировать, что локальный пейджинг работает. Кроме того, вы можете рассмотреть возможность использования height: 'auto' вместо фиксированного значения height: 500. rowNum, который вы используете, будет определять высоту сетки.

Дополнительно я включил во второе демо строку

$("#list2").jqGrid('filterToolbar',
    {stringResult: true, defaultSearch: 'cn', searchOnEnter: false});

для демонстрации мощности локальной фильтрации данных . Я добавил еще одну опцию ignoreCase: true, чтобы фильтровать / искать данные без учета регистра.