Question

我正在使用MVC＆amp; amp; Web Api。在视图上我正在使用JqGrid。以前我们曾经将本地数据分配给JqGrid，它工作正常。现在由于逻辑上的一些变化，我们使用WebApi从Server中获取数据，这是一个Json数据，我们将它存储在变量中，然后我们将这个数据对象分配给JqGrid，但数据不会显示。当我给web api的“url”代替数据选项时，一切正常，但是一旦我们使用“数据”选项，那么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"。

所有其他数据类型将被解释为 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属性的值相同）。

使用Web Api在JqGrid中分配JSon数据

1 个答案: