Erste und Sortierung von JSON auf jqGrid

Question

Ich bin neu mit jQuery und jqGrid und ich bin immer zwei Arten von JSON Inhalt von einem anderen System mit den folgenden Formaten:

Option # 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" 
     } 
    ] 
} 

hier ist die jqGrid ich habe, ist wie folgt definiert:

$().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' 
    }); 
}); 

ich die Daten erhalten, aber das sortieren und Paging funktioniert nicht.

Option 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" 
    } 
] 

hier die jqGrid ich habe, ist wie folgt definiert:

$().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'        
    }); 
}); 

wieder nicht sicher, ob ich da hier richtig mein jqrig Objekt definiere ich nicht eine habe Wurzelelement in JSON.

In beiden Optionen funktioniert die Sortierung nicht und ich kann die Gesamtzahl der Datensätze und Seiten auf dem Pager-Element nicht richtig ausfüllen.

Jede Hilfe wird geschätzt.

Answer 1

Sie haben zwei Hauptprobleme. Der erste: die Sortierung. Es ist sehr einfach zu lösen. jqGrid mit datatype: 'json' fragen Sie erhalten nur eine Seite der sortierten Daten. Wenn der Benutzer die Sortierreihenfolge ändert oder zum Beispiel zur nächsten Seite geht, wird die neue Anfrage mit anderen Parametern an den Server gesendet.

Wenn Sie wollen, dass die Daten nur einmal vom Server geladen werden und wird dann lokal sortiert oder ausgelagerten Sie müssen nur loadonce: true Option zum Netz hinzuzufügen. Sie müssen noch korrekt sortierte Daten zurückgeben, um die Sortierreihenfolge zu erhalten.

Aus Leistungsgründen sollten Sie immer gridview: true in die Liste der verwendeten Optionen aufnehmen.

Das nächste Problem mit zwei Formaten von JSON-Daten, die vom Server zurückgegeben werden, können Sie auf einfache Weise lösen.

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; 
    } 
} 

Die entsprechenden Demos: Sie können die jsonReader der folgenden ändern the first one und the second one den gleichen Code verwenden, aber unterschiedliche formatiert JSON-Daten lesen (die Daten, die Sie auf dem Laufenden). Beide ergeben die gleichen Ergebnisse. Ich änderte rowNum zu rowNum: 2, um zu demonstrieren, dass örtliches Paging funktioniert. Zusätzlich können Sie den Wert height: 'auto' anstelle des festen Werts height: 500 verwenden. Die von Ihnen verwendete rowNum definiert die Höhe des Gitters.

Zusätzlich enthalten ich in der zweiten Demo die Linie

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

die Macht der local data filtering zu demonstrieren. Ich fügte eine weitere Option ignoreCase: true hinzu, um case insensitive Filtern/Suchen von Daten zu haben.