jqgrid第1页的x pager

Question

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

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

任何帮助表示赞赏.

Answer 1

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

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

{ 
  "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.

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

更新:好的杰夫.我在jqgrid中继续我的答案setGridParam数据类型:local和post如何承诺一个代码如何进行服务器端的分页,排序和搜索(或高级搜索).

首先在这个例子中,我不会真正实现排序和搜索,只能模拟你现在遇到问题的分页.真正的分页,排序和搜索应该作为SELECT数据存在的SQL数据库的相应语句来实现.排序遵循ORDER BY,搜索WHERE和分页构造,如TOP(x),TOP(x)使用LEFT OUTER JOIN或使用ROW_NUMBER() OVER(...)构造.但这些都不是你问题的主题.所以我减少了对数据分页的简单模拟.

我从ASMX Web方法的代码开始:

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定义如下:

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以使代码示例更具可读性.

现在客户端代码:

$("#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数据类型:local但serializeGridData功能代码有点不同.因为我们使用POST而不是GET方法从服务器获取数据,所以必须始终设置Web方法的所有输入参数.另一方面,jqGrid设置并不总是参数searchField,searchOper而且searchString,仅限于_search=true.例如,在第一次加载jqGrid时,_search=false和searchField,searchOper并且searchString未在中定义postData.为了解决这个问题,我们使用初始化未定义的参数null.

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

为了实现搜索一个需要使用其他参数_search,searchField,searchOper,searchString.

在先进的搜索,而不是 searchField,searchOper,searchString参数的参数filters必须使用(见注释行).必须根据JSON解串器对数据进行解码.所以必须multipleSearch : true在jqgrid中设置.该serializeGridData功能应替换为

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

并且应该将Web方法的原型更改为

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

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

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用法.

我在这里用一个最简单的数据从服务器发送到客户端,并id在主数据之外添加.如果表中的某个列是id,则可以稍微减少发送到服务器的数据.有关详细信息,请参阅Jqgrid 3.7不显示Internet Explorer中的行.