jqgrid x pager 的第 1 页

First of all in the example I will not really implement sorting and searching and only simulate paging where you have problem now. The real paging, sorting and searching should be implemented as the corresponding SELECT statements to SQL database where the data exists. The sorting follow to the ORDER BY, searching to WHERE and paging to constructions like TOP(x), TOP(x) with LEFT OUTER JOIN or the usage of ROW_NUMBER() OVER(...) constructs. But these all are not the subject of your question. So I reduce all to the simple simulation of data paging.

我从 ASMX Web Method 的代码开始:

I start with the code of the ASMX Web Method:

public JqGridData TestMethod (int page, int rows, string sidx, string sord,
    bool _search, string searchField, string searchOper, string searchString) {
    // for advance search use "string filters" instead of the last three parameters
    int recordsCount = 205;

    int startIndex = (page - 1) * rows;
    int endIndex = (startIndex + rows < recordsCount) ?
                   startIndex + rows : recordsCount; 
    List<TableRow> gridRows = new List<TableRow> (rows);
    for (int i = startIndex; i < endIndex; 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 = (recordsCount + rows - 1) / rows,
        page = page,
        records = recordsCount,
        rows = gridRows
    };
}

JqGridData 和 TableRow 类的定义如下:

where classes JqGridData and TableRow are defined like following:

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的输入参数的任何验证，以使代码示例更具可读性.

We skip any verification of input parameters of the TestMethod to make the code example more readable.

现在是客户端代码:

$("#list").jqGrid({
    url: './MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        if (postData.searchField === undefined) postData.searchField = null;
        if (postData.searchString === undefined) postData.searchString = null;
        if (postData.searchOper === undefined) postData.searchOper = null;
        //if (postData.filters === undefined) postData.filters = null;
        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; }
    },
    // you can also use following more simple form of jsonReader instead:
    // jsonReader: { root: "d.rows", page: "d.page", total: "d.total",
    //               records: "d.records", id: "d.names" }
    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});
//                {}, // use default settings for edit
//                {}, // use default settings for add
//                {}, // delete instead that del:false we need this
//                {multipleSearch : true} // enable the advanced searching
//                );

在代码中，我使用了与 jqgrid setGridParam datatype:local 中相同的技术但是 serializeGridData 函数的代码有点不同.因为我们使用 POST 而不是 GET 方法从服务器获取数据必须始终设置 web 方法的所有输入参数.另一方面，jqGrid 并不总是设置参数 searchField、searchOper 和 searchString，而是仅在 _search=true 时设置.例如在第一次加载 jqGrid 时，_search=false 和 searchField、searchOper 和 searchString 没有定义在 postData 中.为了解决这个问题，我们用 null 初始化未定义的参数.

In the code I use the same technique like in jqgrid setGridParam datatype:local but the code of serializeGridData function is a little different. Because we use POST and not GET method to get the data from the server all input parameters of the web method must be always set. On the other side jqGrid set not always parameters searchField, searchOper and searchString, but only if _search=true. For example at the first load of jqGrid, the _search=false and searchField, searchOper and searchString are not defined in the postData. To fix the problem we initialize undefined parameters with null.

要实现排序需要使用sidx(排序索引)和sord(排序方向:"asc" or "desc") 参数.

To implement sorting one needs to use sidx (sort index) and sord (sort direction: "asc" or "desc") parameters.

要实现搜索需要使用其他参数_search、searchField、searchOper、searchString.

To implement searching one needs to use other parameters _search, searchField, searchOper, searchString.

在高级搜索期间，必须使用参数 filters 而不是 searchField、searchOper、searchString 参数(请参阅注释行).必须根据 JSON 反序列化器对数据进行解码.所以必须在jqgrid中设置multipleSearch:true.serializeGridData 函数应替换为

During advanced searching instead of searchField, searchOper, searchString parameters the parameter filters must be used (see commented lines). The data must be decoded with respect of a JSON deserializer. So must be set multipleSearch : true in the jqgrid. The serializeGridData function should be replaced to

serializeGridData: function (postData) {
    if (postData.filters === undefined) postData.filters = null;
    return JSON.stringify(postData);
}

并且web方法的原型应该改成

and the prototype of the web method should be changed to

public JqGridData TestMethod (int page, int rows, string sidx, string sord,
    bool _search, string filters)

解码参数filters可以使用这样简单的代码:

to decode the parameter filters one can use such simple code:

if (_search && !String.IsNullOrEmpty (filters)) {
    JavaScriptSerializer serializer = new JavaScriptSerializer ();
    jqGridSearchFilter searchFilter =
        serializer.Deserialize<jqGridSearchFilter> (filters);
    // use the searchFilter here
}

类 jqGridSearchFilter 可以定义如下:

public class jqGridSearchFilterItem {
    public string field { get; set; }
    public string op { get; set; }
    public string data { get; set; }
}
public class jqGridSearchFilter {
    public string groupOp { get; set; }
    public List<jqGridSearchFilterItem> rules { get; set; }
}

我希望这些信息足以让您在 ASMX Web 方法方面实现任何类型的 jqGrid 用法.

I hope this information will be enough for you to implement any kind of jqGrid usage with respect of ASMX Web Method.

我在这里使用了从服务器发送到客户端的最简单的数据，并在主数据之外添加了额外的 id.如果表中的一列是 id，则可以稍微减少发送到服务器的数据.请参阅 Jqgrid 3.7 不显示行Internet Explorer 了解更多详情.

I used here a simplest data send from server to the client with additional id outside of the main data. If one of the columns which you have in the table is the id, you can a little reduce the data send to the server. See Jqgrid 3.7 does not show rows in internet explorer for more details.

这篇关于jqgrid x pager 的第 1 页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！