jQuery加載數據到jqGrid

Question

我是jqGrid的第一次用戶，到目前爲止，我去槽官方的例子，我有興趣使用json將數據加載到網格。

我目前看，加載數據（JSON數據）： http://trirand.com/blog/jqgrid/jqgrid.html

這裏是一些JavaScript創建網格：

jQuery("#list2").jqGrid(
    { 
     url : '<c:url value="${webappRoot}/getdetails" />', 
     datatype : "json", 
     colNames : [ 'id', 'Location', 'Country Code', 'Type', 'Interval', 
        'Version', 'Last Active', 'Last Login', 'NOTE' ], 
     colModel : [ 
      { name : 'id', width : 10 }, 
      { name : 'location', width : 75 }, 
      { name : 'countryCode', width : 50 }, 
      { name : 'type', width : 40 }, 
      { name : 'interval', width : 30 }, 
      { name : 'version', width : 45 }, 
      { name : 'lastactive', width : 50, align : "right" }, 
      { name : 'lastlogin', width : 50, sortable : false }, 
      { name : 'note', width : 50, sortable : false} 
     ], 
     rowNum : 10, 
     rowList : [ 10, 20, 30 ], 
     pager : '#pager2', 
     width: gridWidth, 
     sortname : 'id', 
     viewrecords : true, 
     sortorder : "desc", 
     caption : "JSON Example" 
}); 
jQuery("#list2").jqGrid('navGrid', '#pager2', 
         { edit : false, add : false, del : false}); 

${webappRoot}/getdetails轉換路徑到我的項目像http://localhost/myProject/getdetails，我使用的是Spring MVC（它可能無關緊要）。

當我看着螢火蟲這會產生這樣的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選項卡這一切似乎與此相同，任何想法是什麼我做錯了？

我想加載只有一個記錄開始，我不能得到它的工作，任何幫助appriciated。

Answer 1

首先，您並不是第一個理解如何構建JSON數據的問題，從jqGrid發送到服務器的參數意味着什麼，等等。 The official jqGrid documentation沒有包含足夠的介紹，所以jqGrid使用的第一步可能比預期的要困難一些。

存在於服務器的JSON響應中的問題是：它只包含一項數據，而不包含表示網格行的項目的數組（或列表）。數據應至少

[ 
    { 
     "id": 1, 
     "location": "office_2782", 
     "countryCode": "UK", 
     "quarter": "500", 
     "version": "v3.05", 
     "lastactive": "yesterday", 
     "lastlogin": "today", 
     "note": "no note", 
     "type": "read-only" 
    } 
] 

或更好

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     { 
      "id": 1, 
      "location": "office_2782", 
      "countryCode": "UK", 
      "quarter": 500, 
      "version": "v3.05", 
      "lastactive": "yesterday", 
      "lastlogin": "today", 
      "note": "no note", 
      "type": "read-only" 
     } 
    ] 
} 

或者甚至

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

或

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

這種奇怪的第一眼原因JSON數據是jqGrid是de簽署以支持在服務器上實施的數據實施的分頁，排序和過濾/搜索。因此，從發送到服務器的url參數rows=10&page=1&sidx=id&sord=desc意味着jqGrid要求服務器獲取數據的第一頁（頁面= 1），頁面每頁有10行（rows = 10）。數據應該先按id（sidx = id）按降序排列（sord = desc）。如果行數很少（例如在某些hundert下），如果您添加了jqGrid的loadonce:true參數，則可以使用基於客戶端的排序，分頁和過濾，但基於服務器的實現允許您使用數十萬個非常大的數據集具有良好性能的數據行。

我建議您閱讀我的this answer，我試圖解釋如何使用服務器響應「總計」，「頁面」和「記錄」的附加元素。參數的值可以用JSON編碼爲數字或字符串（根據您的喜好）。

如果例如所述的jqGrid「位置」列的列報頭中的用戶點擊將發送新請求到具有在url 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事件句柄的過程中，可以解碼響應並顯示有關錯誤的信息。