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

查看:31
本文介绍了jqgrid 第 1 页 of x pager的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想弄清楚如何使用 jqGrid 的分页功能.目前我被困在第 1 页,共 4 页.无论我是否按下下一步按钮.它只是保持在 1.

我使用 ASP.Net 和网络服务来填充我的 JSON 数据.如何从客户端捕获事件以填充网络服务上的属性以带回正确的值?

感谢任何帮助.

解决方案

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

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

<代码>{"总": "5",第2页","记录": "55",行":[{"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 datatype:local 中继续我的回答并发布如何承诺代码如何进行服务器端分页、排序和搜索(或高级搜索).

首先,在示例中,我不会真正实现排序和搜索,只会在出现问题的地方模拟分页.真正的分页、排序和搜索,应该通过相应的SELECT语句到数据所在的SQL数据库中实现.排序遵循ORDER BY,搜索到WHERE,然后分页到TOP(x)TOP(x)LEFT OUTER JOINROW_NUMBER() OVER(...) 结构的用法.但这些都不是你问题的主题.所以我把一切都简化为数据分页的简单模拟.

我从ASMX Web Method的代码开始:

public JqGridData TestMethod (int page, int rows, string sidx, string sord,bool _search, 字符串 searchField, 字符串 searchOper, 字符串 searchString) {//对于高级搜索,使用字符串过滤器"而不是最后三个参数整数记录计数 = 205;int startIndex = (page - 1) * 行数;int endIndex = (startIndex + rows <记录数) ?startIndex + 行数:记录数;列表gridRows = 新列表(行);for (int i = startIndex; i < endIndex; i++) {gridRows.Add(new TableRow(){id = i,单元格 = 新列表<字符串>(2) {string.Format("名称{0}", i),string.Format("标题{0}", i)}});}返回新的 JqGridData() {总计 = (记录数 + 行数 - 1)/行数,页 = 页,记录 = 记录数,行 = gridRows};}

其中 JqGridDataTableRow 类的定义如下:

public class TableRow {公共 int id { 获取;放;}公共列表<字符串>细胞{得到;放;}}公共类 JqGridData {公共整数总{得到;放;}公共 int 页面 { 获取;放;}公共 int 记录 { 获取;放;}公共列表行{得到;放;}}

我们跳过对 TestMethod 的输入参数的任何验证,以使代码示例更具可读性.

现在是客户端代码:

$("#list").jqGrid({url: './MyTestWS.asmx/TestMethod',数据类型:'json',mtype: 'POST',ajaxGridOptions: { contentType: 'application/json;字符集=utf-8' },serializeGridData:函数(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;返回 JSON.stringify(postData);},jsonReader:{根:函数(obj){返回obj.d.rows;},页面:函数(obj){返回obj.d.page;},总计:函数(obj){返回obj.d.total;},记录:函数(obj){返回obj.d.records;}},//您也可以使用以下更简单的 jsonReader 形式://jsonReader: { root: "d.rows", page: "d.page", total: "d.total",//记录: "d.records", id: "d.names" }颜色型号:[{名称:'名称',标签:'名称',宽度:250},{名称:'标题',标签:'标题',宽度:250}],行数:10,行列表:[10, 20, 300],排序名称:'名称',排序顺序:升序",寻呼机:#pager",观看记录:真实,网格视图:真实,行号:真,高度:250,标题:我的第一个网格"}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true});//{},//使用默认设置进行编辑//{},//使用默认设置添加//{},//删除而不是那个 del:false 我们需要这个//{multipleSearch : true}//启用高级搜索//);

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

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

实现搜索需要使用其他参数_searchsearchFieldsearchOpersearchString.>

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

serializeGridData: 函数 (postData) {if (postData.filters === undefined) postData.filters = null;返回 JSON.stringify(postData);}

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

public JqGridData TestMethod (int page, int rows, string sidx, string sord,bool _search,字符串过滤器)

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

if (_search && !String.IsNullOrEmpty (filters)) {JavaScriptSerializer serializer = new JavaScriptSerializer();jqGridSearchFilter searchFilter =serializer.Deserialize(过滤器);//在这里使用搜索过滤器}

jqGridSearchFilter 类可以定义如下:

公共类 jqGridSearchFilterItem {公共字符串字段 { 获取;放;}公共字符串操作 { 获取;放;}公共字符串数据 { 获取;放;}}公共类 jqGridSearchFilter {公共字符串 groupOp { 获取;放;}公共列表规则{得到;放;}}

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

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

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.

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?

Any help is appreciated.

解决方案

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).

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"]},
  ]
}

(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.

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

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).

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.

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

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

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

Now the client code:

$("#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
//                );

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.

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

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

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

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)

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
}

where the class jqGridSearchFilter can be defined like following:

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

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆