jqGrid的第1个寻呼机 [英] jqgrid Page 1 of x pager
问题描述
我试图找出如何用户的jqGrid的分页功能。
目前，我被困在4.无论1，如果我preSS下一步按钮与否。它只是停留在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.
我使用ASP.Net与web服务来填充我的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?
任何帮助是AP preciated。
Any help is appreciated.
推荐答案
如果有preSS下一步按钮，一个新的请求会被发送到服务器。该请求将包含页= 2 ，例如，行= 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).
您的服务器code应该阅读参数，并发送回相应的数据行。 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"]},
]
}
（见<一href=\"http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data\">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data).因此，数据必须包含页正确的值（页面= 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.
所以我建议，目前你的服务器code不输出回馈的页正确的值。
So I suggest that currently your server code don't give back the correct value of page in the output.
更新时间：：OK杰夫。我继续我的答案<一个href=\"http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652\">http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652和后期如何答应了code怎么做服务器端分页，排序和搜索（或高级搜索）。
UPDATED: OK Jeff. I continue my answer in http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652 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）与 LEFT OUTER JOIN 或<$的用法C $ C> 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方法的code：
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 像以下定义：
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的来使code例子更具可读性。
We skip any verification of input parameters of the TestMethod to make the code example more readable.
现在客户端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
// );
在code我用像<一个相同的技术href=\"http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652\">http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652但 serializeGridData 函数的code是一个有点不同。由于我们使用POST和GET没有方法来从服务器获取数据的 Web方法的所有输入参数必须始终设置即可。在另一边jqGrid的设置并不总是参数 searchField ， searchOper 和搜索字符串，但只有当 _search = TRUE 。例如在jqGrid的第一负荷时， _search = FALSE 和 searchField ， searchOper 和搜索字符串未在 POSTDATA 定义。为了解决这个问题，我们初始化空未定义的参数。
In the code I use the same technique like in http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652 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或递减）的参数。
To implement sorting one needs to use sidx (sort index) and sord (sort direction: "asc" or "desc") parameters.
要实现搜索一个人需要使用其他参数 _search ， searchField ， searchOper ，搜索字符串。
To implement searching one needs to use other parameters _search, searchField, searchOper, searchString.
在高级搜索，而不是 searchField ， searchOper ，搜索字符串参数过滤器必须使用的参数（见注释行）。数据必须去codeD相对于一个JSON解串器。在jqGrid的真实：那么必须设置 multipleSearch。在 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)
脱code参数过滤器可以使用这种简单的code：
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; }
}
我希望这个信息将是足以让你实现任何一种使用的jqGrid与尊重ASMX Web方法。
I hope this information will be enough for you to implement any kind of jqGrid usage with respect of ASMX Web Method.
我以前这里简单的数据从服务器向客户端发送额外的 ID 主数据之外。如果您在表中有一列是 ID ，你可以稍微减少数据发送到服务器。见<一href=\"http://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer/3061669#3061669\">http://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer/3061669#3061669了解更多详情。
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 http://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer/3061669#3061669 for more details.
这篇关于jqGrid的第1个寻呼机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
