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（可能無關緊要）。

當我查看firebug時，會生成此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選項卡時，它看起來都像這樣，任何想法我做錯了什么？

我正在嘗試只加載一條記錄作為開始，我無法讓它正常工作，任何幫助都是適當的。

Answer 1

首先，您不是第一個理解如何構造JSON數據，從jqGrid發送到服務器的參數是什么等問題的人。 官方的jqGrid文檔沒有足夠的介紹，因此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旨在支持在服務器上實現的數據的分頁，排序和過濾/搜索。 所以從發送到服務器的url參數rows=10&page=1&sidx=id&sord=desc意味着jqGrid要求服務器獲取數據的第一頁（page = 1），頁面每頁有10行（rows = 10 ）。 數據應先按id （sidx = id）按降序排序（sord = desc）。 如果您的行數很少（例如，在某些hundert下），您可以使用基於客戶端的排序，分頁和過濾，如果您添加了loadonce:true參數，但基於服務器的實現允許您使用具有許多行的真正大型數據集數十萬行數據具有非常好的性能。

我建議你閱讀我的答案 ，我試圖解釋如何使用服務器響應“total”，“page”和“records”的附加元素。 參數的值可以用JSON編碼為數字或字符串（根據您的口味）。

如果用戶點擊“位置”列的列標題，例如jqGrid將向網址中的sidx=location&sord=asc的服務器發送新請求 。 因此，重要的是要理解，可以要求服務器不是每個網格提供網格數據，而是多次，並且請求將包含使用jqGrid的用戶選擇的一些參數。

定義jsonReader （有時是每列的附加jsonmap參數），您將描述服務器響應的結構。 使用信息jqGrid讀取響應並填充網格。

該演示顯示，使用相應的jsonReader您甚至可以讀取原始的JSON數據。

我的最后建議是在開始時考慮使用loadError事件句柄，它有助於告知用戶服務器報告的錯誤。 在答案中，我已經展示了如何在ASP.NET MVC的情況下實現它。 我自己不使用spring MVC，所以我不能直接舉例說明如何在spring MVC中更好地實現錯誤報告，但主要思想在任何服務器技術中都是一樣的：如果出現錯誤，服務器應該響應響應具有錯誤的HTTP狀態代碼 。 在loadError事件句柄的實現中，您可以解碼響應並顯示有關錯誤的信息。