使用WebApi在JqGrid中分配JSon數據

我正在使用MVC構建一個應用程序& Web Api。在視圖上我正在使用JqGrid。以前我們曾經把本地數據分配給JqGrid，它工作正常。現在由於邏輯上的一些變化，我們使用WebApi從服務器獲取數據，這是一個Json數據，我們將它存儲在變量中，然後我們將這個數據對象分配給JqGrid，但數據不會顯示。而不是數據選項我給web api的「網址」，然後一切工作正常，但只要我們使用「數據」選項然後jqgrid不起作用。可能的原因是什麼？這樣做的理由是我想在本地添加，編輯和更新數據，然後當最終保存按鈕被按下時，數據將返回到服務器。使用WebApi在JqGrid中分配JSon數據

$().ready(function() {   
    //{"total":1,"page":1,"records":3,"rows":[{"id":"1","cell":["1","Tomato   
    //Soup","[email protected]","[email protected]","Groceries"]},{"id":"2","cell":["2","Yo- 
    //yo","[email protected]","[email protected]","Toys"]},{"id":"3","cell": 
    //["3","Hammer","[email protected]","[email protected]","Hardware"]}]} 
    // 

    $.getJSON("api/userwebapi/", 
     function (data) { 
      //userDataFromApi = jQuery.parseJSON(data); 
      userDataFromApi =data; 
      //alert(userDataFromApi[0].ID); 
      ConfigureUserGrid(userDataFromApi); 
     }); 


}); 

function ConfigureUserGrid(userDataFromApi) { 

    var grdUsers = $("#grdUsers"); 
    var lastsel = 0; 
    $("#grdUsers").jqGrid({    
     datatype: "json" 
     , data: userDataFromApi 
     //, url: "api/userwebapi" 
     ,colNames: ['ID', 'Name', 'User Role', 'Email', 'Address'] 
     ,colModel: [ 
      { name: 'ID', index: 'ID', width: 80, hidden: true } 
     , { name: 'Name', index: 'Name', width: 150 } 
     , { name: 'UserRole', index: 'UserRole', width: 150 } 
     , { name: 'Email', index: 'Email', width: 200, sortable: true } 
     , { name: 'Address', index: 'Address', width: 200, sortable: true }]    
     , viewrecords: true    
     , pager: '#pager1' 
     , mtype: 'GET' 
    ,rowNum:true 
    ,caption: 'My first grid' 
    });       //close of jQuery("#grdUsers").jqGrid({ 

    $("#grdUsers").jqGrid('navGrid', '#pager1', 
      { add: false, del: false, edit: false, search: false, refresh: false }); 
}

來源

2012-09-24 Deepesh

在我看來，服務器'url'的遠程調用的使用與'loadonce：true'可選的使用'data'參數的使用更好。無論如何，兩種方式都必須工作。我想你應該修改'jsonReader'來對應來自服務器的響應。無論如何，你應該發佈更多的代碼和一些測試數據（來自服務器的'data'值）來描述你的問題。 – Oleg

oleg !!我已添加代碼 – Deepesh

問題的原因是jqGrid參數（選項）的錯誤用法。正是你使用錯誤組合jqGrid選項。 Tony Tomov（jqGrid的開發人員）在每個新版本中都在jqGrid中添加了許多功能。如果可能的話，他想保持向後兼容性。結果有很多選項沒有明確的名稱轉換。只有在設置了其他選項時，許多選項才起作用。就像在jQuery或jQuery UI的情況下一樣，沒有驗證輸入參數。誰開始使用jqGrid會產生很多問題。

你的情況的問題是使用data參數連同datatype: "json"。這是錯誤的參數組合。問題是jqGrid支持兩個遠程數據類型和一些本地數據類型。

如果您使用datatype: "json"或datatype: "xml"，那麼jqGrid將爲您提供AJAX請求，用於初始填充網格以及每次排序，分頁和（可選）篩選。無論如何，將發送對url的請求。一個使用由mtype參數指定的HTTP命令。數據的分頁和排序必須在服務器端上執行。該請求包含請求的頁碼，頁面的長度，用於排序的列索引和排序方向。從服務器返回的數據應採用here的格式。如果使用非標準數據格式，則可以使用jsonReader選項jqGrid和jsonmap（xmlmap）colModel指定如何使用服務器響應填充網格。

如果你不想實現服務器端分頁，排序和過濾數據，你可以使用loadonce: true選項。在服務器應該一次返回所有數據的情況下。數據應根據初始排序列（基於您使用的sortname和sortorder）排序一次。在第一次加載數據後，jqGrid會自動將datatype更改爲"local"。

所有其他數據類型將被解釋爲本地數據類型。 data參數將僅用於datatype: "local"的情況。在這種情況下，應該使用另一種格式的數據。可以使用localReader（請參見here）更改從data參數讀取數據的方式。

有特殊情況datatype: "jsonstring"您可以用datatype: "json"的方式填充網格，但要使用對象或JSON字符串作爲輸入。在應該使用datastr（而不是data !!!）作爲數據輸入的情況下。第一次填充後，datatype將由jqGrid從datatype: "jsonstring"更改爲datatype: "local"。

所以，你有一些選擇來解決這個問題：

使用url和loadonce: true的選擇，如果你不想來實現數據的分頁。

使用datatype: "jsonstring"和datastr而不是data。

使用datatype: "local"和data填充爲命名項目的數組（項目的屬性應該與列的name屬性的值相同）。

來源

2012-09-24 17:05:26 Oleg

感謝噸Oleg !!!有效。 – Deepesh

@Deepesh：不客氣！ – Oleg

使用WebApi在JqGrid中分配JSon數據

回答

相關問題