jqgrid x pager 的第 1 页 [英] jqgrid Page 1 of x pager

问题描述

我正在尝试弄清楚如何使用 jqGrid 的分页功能.目前我被困在第 1 页，共 4 页.无论我是否按下下一步按钮.它只停留在 1.

I am trying to figure out how to user the paging functionality of the jqGrid. Currently I am stuck on Page 1 of 4. No matter if I press the Next button or not. It just stays on 1.

我正在使用带有 Web 服务的 ASP.Net 来填充我的 JSON 数据.如何从客户端捕获事件以填充 Web 服务上的属性以恢复正确的值?

I am using ASP.Net with a webservice to populate my JSON data. How do capture the event from the client to populate the property on the webservice to bring back the correct value?

感谢任何帮助.

推荐答案

如果按下下一步"按钮，则会向服务器发送一个新请求.该请求将包含 page=2 和例如 rows=10 参数作为 URL 的一部分(如果想要获取第二页的下 10 行).

If one press "Next" button a new request will be send to the server. The request will contain page=2 and, for example, rows=10 parameters as a part of URL (if one want to get next 10 rows of the second page).

您的服务器代码应读取此参数并发送回相应的数据行.从服务器发回的 JSON 数据应如下所示

Your server code should read this parameters and send back the corresponding data rows. The JSON data send back from the server should look like following

{ 
  "total": "5", 
  "page": "2", 
  "records": "55",
  "rows" : [
    {"id" :"21", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"22", "cell" :["cell21", "cell22", "cell23"]},
      ...
    {"id" :"30", "cell" :["cell31", "cell32", "cell33"]},
  ]
}

(参见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data).因此数据必须包含 page (page=2) 的正确值.一般来说，现在您有可能像以前一样拥有更少的数据，并且您在请求中返回第 1 页以获取第 2 页.

(see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data). So the data must contain the correct value for the page (page=2). In general it is possible, that now you have less data as before and you give back the page number 1 on the request to get the page number 2.

所以我建议目前您的服务器代码不要在输出中返回正确的 page 值.

So I suggest that currently your server code don't give back the correct value of page in the output.

更新:好的，杰夫.我在 jqgrid setGridParam datatype:local 中继续我的回答并发布如何承诺代码如何进行服务器端分页、排序和搜索(或高级搜索).

UPDATED: OK Jeff. I continue my answer in jqgrid setGridParam datatype:local and post how is promised a code how do server side paging, sorting and searching (or advanced searching).

首先在示例中，我不会真正实现排序和搜索，而只会在您现在遇到问题的地方模拟分页.真正的分页、排序和搜索，应该通过对应的SELECT语句来实现到数据所在的SQL数据库.排序遵循 ORDER BY，搜索到 WHERE 并分页到 TOP(x)、TOP(x)<等结构/code> 与 LEFT OUTER JOIN 或 ROW_NUMBER() OVER(...) 结构的使用.但这些都不是你问题的主题.所以我把一切都简化为数据分页的简单模拟.

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 页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！