asp.net-mvc - 使用 WebApi 在 JqGrid 中分配 JSon 数据

Question

我正在使用 MVC 和 Web Api 构建应用程序。在一个 View 上，我正在使用 JqGrid。以前我们曾经将本地数据分配给工作正常的 JqGrid。现在由于逻辑上的一些变化，我们使用 WebApi 从服务器获取数据，这是一个 Json 数据，我们将它存储在变量中，然后我们将这个数据对象分配给 JqGrid，但数据没有显示。当我给出 web api 的“url”而不是数据选项时，一切正常，但是一旦我们使用“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 });
}

Answer 1

问题的原因是 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 属性的值相同)。