jqgrid第1页x分页器
我想弄清楚如何使用jqGrid的分页function。 目前我被困在第1页，共4页。不pipe是否按下“下一步”button。 它只停留在1。
我正在使用ASP.Net与Web服务来填充我的JSON数据。 如何从客户端捕获事件以填充web服务上的属性以恢复正确的值？
任何帮助表示赞赏。
如果按“下一步”button，新的请求将被发送到服务器。 该请求将包含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）。 一般情况下，现在您可以减less以前的数据，并在请求中返回页码1来获取页码2。
所以我build议你现在的服务器代码不要在输出中返回正确的page值。
更新 ：好的杰夫。 我继续在jqgrid setGridParam数据types的答案：本地和后期如何承诺一个代码如何做服务器端分页，sorting和search（或高级search）。
首先在这个例子中，我不会真正实现sorting和search，只在现在有问题的地方模拟分页。 真正的分页，sorting和search应该作为相应的SELECT语句实现到存在数据的SQL数据库。 sorting按照ORDER BY ，search到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的input参数validation，以使代码示例更具可读性。
现在客户端代码：
$("#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数据types相同的技术：本地但serializeGridData函数的代码是有点不同。 由于我们使用POST而不是GET方法从服务器获取数据，因此必须始终设置Web方法的所有input参数 。 另一方面jqGrid设置不总是参数searchField ， searchOper和searchString ，但只有_search=true 。 例如，在jqGrid的第一次加载时， searchString中没有定义_search=false和searchField ， searchOper和postData 。 为了解决这个问题，我们用null初始化未定义的参数。
要实现sorting需要使用sidx （sort index）和sord （sorting方向： "asc"或"desc" ）参数。
要实现search，需要使用其他参数_search ， searchField ， searchOper ， searchString 。
在高级search期间，而不是searchField ， searchOper ， searchString参数中必须使用参数filters （参见注释行）。 数据必须针对JSON解串器进行解码。 所以必须在jqgrid中设置multipleSearch : true 。 serializeGridData函数应该被replace为
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方法中实现任何types的jqGrid用法。
在这里，我使用了一个最简单的数据从服务器发送到客户端与主数据之外的附加id 。 如果你在表中有一列是id ，那么你可以稍微减less发送给服务器的数据。 请参阅Jqgrid 3.7在Internet Explorer中不显示行以获取更多详细信息。
好的，我正在回答这个问题，因为我接受了奥列格上面所说的，但是明确了他的意思。
我的.ajax调用封装在一个函数，传递postdata作为参数。 我找不到有关该参数的任何文档，但我想也许这是包含页面值的地方。 正如你所看到的，我对postdata.page做了一个警告，看到我有一个值（基于下一个button的点击）。
所以我在我的webservice中创build了一个名为page（integer）的参数。
就像一个附注，你从jQuery传递一个整数值到你的ASP.Net webservice，像这样：
data: "{'page':'" + postdata.page + "'}"
以下是全部function：
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"); } } });
}
