Получение и сортировка с 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; 
    } 
} 

Соответствующие демки: 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, чтобы иметь нечувствительную к регистру фильтрацию/поиск данных.