Question

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

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

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' });
    }
});
}

Answer 1

有一些误解。如果您使用datatype: local，则必须使用addRowData之类的方法自行填充jqGrid，或者使用data参数（对于jqGrid版本3.7及更高版本）将数据设置为一次。因此，jqGrid后面datatype: local的使用不会自行加载任何数据，您的datatype: processrequest参数将被忽略。

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

还有一个小小的评论。您在示例中使用的jsonReader的大多数属性都是默认属性（请参阅this wiki）。您使用的参数将与默认属性组合，因此使用参数就足够了 jsonReader: { repeatitems: false, id: "ID"}

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

首先是服务器端。在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
    };
}

其中类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; }
}

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

要读取此类数据并放入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});

关于jqGrid定义的一些评论：

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

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

为了做到这一切，我使用了jqGrid的datatype，ajaxGridOptions和serializeGridData参数。我使用JSON.stringify函数进行JSON编码（相应的JavaScript可以从here下载）。

然后必须解码接收的数据。我使用我最喜欢的jqGrid功能 - jsonReader来执行此功能（请参阅this SO post和this wiki）。

最后我们使用loadonce: true将jqGrid的datatype从'json'更改为'local'，我们可以立即使用本地分页，排序和高级搜索的所有优势从jqGrid版本3.7开始存在。

如果您确实希望使用ASMX Web服务进行服务器端分页，排序和搜索（或高级搜索），则也可以。要在此处保存一个小地方并分隔代码示例，我将在您的其他问题jqgrid Page 1 of x pager中发布相应的示例（请参阅更新部分）。

Answer 2

这有点晚了，但对于未来寻求解决方案的人来说，这是一个超级简单的解决方案：

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

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

jqgrid setGridParam数据类型：local

3 个答案: