jQuery jqgrid setGridParam 数据类型：本地

jqgrid setGridParam datatype:local

提问by webdad3

I don't want to hit the server and bring back every row when I am paging through the records by using the pager. I read that if I set the datatype = local in the complete blog in the .ajax function AND if I set loadonce:true then I should be able to avoid having to wait for the grid to reload with the data.

当我使用寻呼机对记录进行分页时，我不想访问服务器并带回每一行。我读到如果我在 .ajax 函数的完整博客中设置 datatype = local 并且如果我设置 loadonce:true 那么我应该能够避免等待网格重新加载数据。

However, when I do these things the grid doesn't go to the next page. It just hangs...
What am I doing wrong?

但是，当我做这些事情时，网格不会转到下一页。它只是挂起......
我做错了什么？

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        datatype: processrequest,
        mtype: 'POST',  
        jsonReader: {  
            root: "rows", //arry containing actual data  
            page: "page", //current page  
            total: "total", //total pages for the query  
            records: "records", //total number of records  
            repeatitems: false,  
            id: "ID" //index of the column with the PK in it   
        },
        colNames: ['Name', 'Title'],
        colModel: [
      { name: 'name', index: 'name', width: 250 },
      { name: 'title', index: 'title', width: 250 }
      ],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortorder: "desc",
        viewrecords: true,
        height: '250px',
        caption: 'My first grid',
        loadonce: true
    }).navGrid('#pager', {edit: false, add: false, del: false});
});

function processrequest(postdata) {
...
$.ajax({
...
    complete: function (jsondata, stat) {
        if (stat == "success") {
            var thegrid = jQuery("#list2")[0];
            var jsonObject = (eval("(" + jsondata.responseText + ")"));
            thegrid.addJSONData(jsonObject.d);
            $(".loading").hide();
        } else {
            $(".loading").hide();
            alert("Error with AJAX callback");
        }
        $("#list").setGridParam({ datatype: 'local' });
    }
});
}

回答by Oleg

There are some misunderstandings. If you use datatype: localthen you have to fill jqGrid yourself with methods like addRowDataor set the data in once with dataparameter (for jqGrid version 3.7 and higher). So the usage of datatype: localfollows to jqGrid don't load any data itself and your datatype: processrequestparameter will be ignored.

有一些误解。如果您使用，datatype: local那么您必须自己使用类似方法填充 jqGridaddRowData或使用data参数一次性设置数据（对于 jqGrid 3.7 版及更高版本）。因此datatype: localjqGrid的跟随用法本身不会加载任何数据，并且您的datatype: processrequest参数将被忽略。

If you want to use loadonce: trueparameter which is supported since version 3.7 of jqGrid, you should have all parameters of jqGrid for JSON or XML (for example datatype: jsonin your case) and an additional parameterloadonce: true. Then after the first load of data jqGrid will switch the datatype to datatype: localand after that it will work independent on server but ignore some parameters (like datatype: processrequestin your case).

如果您想使用loadonce: true自 jqGrid 3.7 版以来支持的参数，您应该拥有 JSON 或 XML 的 jqGrid 的所有参数（例如datatype: json在您的情况下）和一个附加参数loadonce: true。然后在第一次加载数据后，jqGrid 会将数据类型切换为datatype: local，然后它将在服务器上独立工作，但忽略一些参数（如datatype: processrequest您的情况）。

One more small remark. The most properties of jsonReaderwhich you use in your example are default (see this wiki). The parameters which you use will be combined with the default properties, so it is enough to use parameter like jsonReader: { repeatitems: false, id: "ID"}

再说一句小话。jsonReader您在示例中使用的大多数属性都是默认的（请参阅此 wiki）。您使用的参数将与默认属性组合，因此使用类似的参数就足够了 jsonReader: { repeatitems: false, id: "ID"}

UPDATED: OK Jeff. It seems to me, to solve your problem you need some more code examples from both sides: client and server. Here is a small example which I created and tested for you.

更新：好的杰夫。在我看来，要解决您的问题，您需要来自双方的更多代码示例：客户端和服务器。这是我为您创建和测试的一个小示例。

First of all the server side. In the ASMX web service we define a web method which generate a test data for your table:

首先是服务器端。在 ASMX Web 服务中，我们定义了一个 Web 方法，用于为您的表生成测试数据：

public JqGridData TestMethod() {
    int count = 200;
    List<TableRow> gridRows = new List<TableRow> (count);
    for (int i = 0; i < count; i++) {
        gridRows.Add (new TableRow () {
            id = i,
            cell = new List<string> (2) {
                string.Format("Name{0}", i), 
                string.Format("Title{0}", i)
            }
        });
    }

    return new JqGridData() {
        total = 1,
        page = 1,
        records = gridRows.Count,
        rows = gridRows
    };
}

where classes JqGridDataand TableRoware defined like following:

其中类JqGridData和TableRow定义如下：

public class TableRow {
    public int id { get; set; }
    public List<string> cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<TableRow> rows { get; set; }
}

Here you can see, the web method TestMethodhas no parameters and posts back the full data. Paging, sorting and searching of data will be done by jqGrid (version 3.7 or higher).

在这里你可以看到，web 方法TestMethod没有参数并回发完整数据。数据的分页、排序和搜索将由 jqGrid（3.7 或更高版本）完成。

To read such data and put into jqGrid we can do following:

要读取此类数据并将其放入 jqGrid，我们可以执行以下操作：

$("#list").jqGrid({
    url: './MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    loadonce: true,
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: function (obj) { return obj.d.rows; },
        page: function (obj) { return obj.d.page; },
        total: function (obj) { return obj.d.total; },
        records: function (obj) { return obj.d.records; }
    },
    colModel: [
        { name: 'name', label: 'Name', width: 250 },
        { name: 'title', label: 'Title', width: 250 }
    ],
    rowNum: 10,
    rowList: [10, 20, 300],
    sortname: 'name',
    sortorder: "asc",
    pager: "#pager",
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    height: 250,
    caption: 'My first grid'
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true},
    {},{},{},{multipleSearch : true});

Some comments about the definition of jqGrid:

关于 jqGrid 定义的一些评论：

To communicate with ASMX web service through JSON one needs to do the following in the corresponding jQuery.ajaxrequest:

要通过 JSON 与 ASMX Web 服务通信，需要在相应的jQuery.ajax请求中执行以下操作：

• dataType: 'json'must be set.
• contentType:'application/json; charset=utf-8'must be set.
• the data sending to the server must be JSON encoded.

• dataType: 'json'必须设置。
• contentType:'application/json; charset=utf-8'必须设置。
• 发送到服务器的数据必须是 JSON 编码的。

To do all these I use datatype, ajaxGridOptionsand serializeGridDataparameters of jqGrid. I do JSON encoding with JSON.stringifyfunction (the corresponding JavaScript can be downloaded from here).

为了完成所有这些，我使用jqGrid 的datatype,ajaxGridOptions和serializeGridData参数。我用JSON.stringify函数做 JSON 编码（相应的 JavaScript 可以从这里下载）。

Then the received data must be decoded. I do this with my favorite feature of jqGrid - jsonReaderwith functions (see this SO postand this wiki).

然后必须对接收到的数据进行解码。我用我最喜欢的 jqGrid 功能来做到这一点 -jsonReader带有功能（请参阅此 SO 帖子和此 wiki）。

At the end we use loadonce: truewhich change the datatypeof jqGrid from 'json'to 'local'and we can use immediately all advantage of local paging, sorting and advanced searching existing since jqGrid version 3.7.

最后，我们使用loadonce: true它改变datatype从jqGrid的的'json'到'local'，我们可以立即使用的本地寻呼的所有优势，排序和的jqGrid以来3.7版高级搜索现有的。

If you do want make server side paging, sorting and searching (or advanced searching) with ASMX web service it is also possible. To save a little place here and to separate code examples I will post the corresponding example in your other question jqgrid Page 1 of x pager(see UPDATED part).

如果您确实希望使用 ASMX Web 服务进行服务器端分页、排序和搜索（或高级搜索），这也是可能的。为了在这里节省一点空间并分隔代码示例，我将在您的其他问题jqgrid Page 1 of x pager 中发布相应的示例（请参阅更新部分）。

回答by Groxx

It's a little bit late, but here's a (the?) super-easy solution for any future solution-seekers:

有点晚了，但是对于任何未来的解决方案寻求者来说，这是一个（？）超级简单的解决方案：

gridComplete: function(){ 
  $("#yourGridID").setGridParam({datatype: 'local'}); 
}

That's it. I'm using 3.7.2, can't speak for any other versions. The problem (apparently) stems from 'loadonce' only working with the pre-defined datatype values, which a function is not. I believethe other built-in values will also work, but 'local' makes sense.

就是这样。我正在使用 3.7.2，不能说任何其他版本。问题（显然）源于“loadonce”仅使用预定义的数据类型值，而函数则不是。我相信其他内置值也可以使用，但 'local' 是有道理的。

回答by Puff Espinosa

This worked for me. I was having an issue with paging and sorting not working. Probably because of the .d and __type items that were being sent back in the JSON object in .net. However, with the extra configurations in this example. This worked !

这对我有用。我遇到了分页和排序不起作用的问题。可能是因为 .d 和 __type 项在 .net 的 JSON 对象中被发回。但是，使用此示例中的额外配置。这奏效了！

I was going nuts. This is the way to configure the grid if you are using .Net as your webservice. It's configured to parse out and correctly set the data elements from the JSON object into the correct locations needed in the Grid to allow for the paging and sorting to work.

我快疯了。如果您使用 .Net 作为您的网络服务，这就是配置网格的方法。它被配置为解析 JSON 对象中的数据元素并将其正确设置到网格中所需的正确位置，以允许分页和排序工作。

I had to comment, because I'm sure there are a few people out there who would like to use this Grid but are using .Net as their webservice.

我不得不发表评论，因为我确信有一些人想要使用这个 Grid 但正在使用 .Net 作为他们的网络服务。