jqgrid第1页x分页器

Question

我想弄清楚如何使用jqGrid的分页功能。 目前我卡在第1页/共4页。无论我按下Next按钮还是不按。它只停留在1.

我使用ASP.Net和web服务来填充我的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 datatype:local继续我的回答，并发布如何承诺一个代码如何做服务器端分页，排序和搜索（或高级搜索）。

首先在这个例子中，我不会真正实现排序和搜索，只在现在有问题的地方模拟分页。应该将实际的分页，排序和搜索作为相应的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 datatype:local但serializeGridData函数的代码是一个有点不同。因为我们使用POST而不是GET方法从服务器获取数据网络方法的所有输入参数必须始终设置为。另一方面，jqGrid并不总是参数searchField,searchOper和searchString，但只有在_search=true。例如，在jqGrid的第一次加载时，_search=false和searchField,searchOper和searchString未在postData中定义。要解决这个问题，我们用null初始化未定义的参数。

要实现排序需要使用sidx（排序索引）和sord（排序方向："asc"或"desc"）参数。

要实现搜索需要使用其他参数_search,searchField,searchOpersearchString。

在高级搜索期间，而不是searchField,searchOper,searchString参数必须使用参数filters（请参见注释行）。数据必须针对JSON解串器进行解码。所以必须在jqgrid中设置multipleSearch : true。的serializeGridData函数应更换到

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

和纸幅的方法的原型应改为

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 does not show rows in internet explorer。

Answer 2

好的我正在回答这个问题，因为我拿了上面说的奥列格的话，但是明确了他的意思。

我的.ajax调用封装在一个将postdata作为参数传递的函数中。我找不到关于该参数的任何文档，但我想也许这就是页面值被包含的地方。正如你所看到的，我对postdata.page和low做了一个警报，并且看到我获得了一个值（基于下一个按钮的点击）。

所以我在我的webservice中创建了一个名为page（integer）的参数。

正如一个附注，你从jQuery传递一个整数值到你的ASP。净Web服务这样的：

data: "{'page':'" + postdata.page + "'}" 

以下是完整的功能：

function processrequest(postdata) { 
alert(postdata.page); 
$(".loading").show(); 
$.ajax({ 
    type: "POST", 
    data: "{'page':'" + postdata.page + "'}", 
    datatype: "json", 
    url: "../webServices/myTestWS.asmx/testMethod", 
    contentType: "application/json; charset-utf-8", 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
    } 
}); 

}