3

我正在使用 MVC 和 Web Api 构建应用程序。在我使用 JqGrid 的视图上。以前我们曾经将本地数据分配给运行良好的 JqGrid。现在由于逻辑上的一些变化，我们使用 WebApi 从服务器获取数据，这是一个 Json 数据，我们将其存储在变量中，然后我们将此数据对象分配给 JqGrid，但数据不会显示。当我给出 web api 的“url”而不是 data 选项时，一切正常，但是一旦我们使用“data”选项，jqgrid 就不起作用。可能的原因是什么？这样做的原因是我想在本地添加、编辑、更新数据，然后当按下最终保存按钮时，数据会返回到服务器。

 $().ready(function () {        
    //{"total":1,"page":1,"records":3,"rows":[{"id":"1","cell":["1","Tomato        
    //Soup","db@db.com","db@db.com","Groceries"]},{"id":"2","cell":["2","Yo-
    //yo","db@db.com","db@db.com","Toys"]},{"id":"3","cell":
    //["3","Hammer","db@db.com","db@db.com","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 });
}
4

1 回答 1

2

问题的原因是 jqGrid 参数（选项）的错误使用。确切地说，您使用了错误的 jqGrid 选项组合。Tony Tomov（jqGrid 的开发者）在每个新版本中都在 jqGrid 中添加了许多特性。如果可能的话，他想保持向后兼容性。结果有很多选项没有明确的名称转换。许多选项只有在设置了一些其他选项时才有效。就像 jQuery 或 jQuery UI 一样，没有输入参数的验证。开始使用 jqGrid 的人会遇到很多问题。

您的问题是data参数与datatype: "json". 这是错误的参数组合。问题是 jqGrid 支持两种远程数据类型和一些本地数据类型。

如果您使用datatype: "json"或datatype: "xml"然后 jqGrid 为您获取 AJAX 请求，用于初始填充网格以及每次排序、分页和（可选）过滤。以任何方式url发送请求。mtype一种使用由参数指定的 HTTP 命令。数据的分页和排序必须在服务器端实现。请求中包含请求的页码、页面长度、用于排序的列索引和排序方向。从服务器返回的数据应采用此处描述的格式。如果您有非标准数据格式，您可以使用jsonReaderjqGrid 和jsonmap( xmlmap) in选项colModel来指定应如何使用服务器响应来填充网格。

如果您不想实现服务器端分页、数据排序和过滤，您可以使用loadonce: trueoption. 在这种情况下，服务器应该一次返回所有数据。应根据初始排序列（基于您使用的列）sortname对数据进行一次排序。sortorderjqGrid 将在第一次加载数据后datatype自动更改为。"local"

所有其他数据类型将被解释为本地数据类型。该data参数仅在 的情况下使用datatype: "local"。在这种情况下，应该使用另一种格式的数据。可以使用localReader（参见此处data）更改从参数中读取数据的方式。

在某些特殊情况下datatype: "jsonstring"，您可以使用接近的方式填充网格datatype: "json"，但使用对象或 JSON 字符串作为输入。在这种情况下，应该使用datastr（不是data！！！）作为数据的输入。在第一次填充后datatype，jqGrid 将其从 更改datatype: "jsonstring"为datatype: "local"。

所以你有一些选择来解决这个问题：

  • 如果您不想实现数据分页，请使用url和选项。loadonce: true
  • 使用datatype: "jsonstring"anddatastr而不是data.
  • 使用datatype: "local"并data填充为命名项的数组（项的属性应name与列的属性值相同）。
于 2012-09-24T17:05:26.493 回答