目前我被困在第1页的第4页.无论我是否按下“下一步”按钮.它只停留在1.
我正在使用ASP.Net和webservice来填充我的JSON数据.如何从客户端捕获事件以填充Web服务上的属性以恢复正确的值？
任何帮助表示赞赏.
解决方法
您的服务器代码应读取此参数并发回相应的数据行.从服务器发回的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 = 2).通常情况下,现在您可以像以前一样拥有更少的数据,并在请求中返回页码1以获取页码2.
更新：好的杰夫.我在jqgrid setGridParam datatype:local继续我的答案,并发布如何承诺一个代码如何服务器端分页,排序和搜索(或高级搜索).
首先在这个例子中,我不会真正实现排序和搜索,只能模拟你现在遇到问题的分页.真正的分页,排序和搜索应该作为数据存在的sql数据库的相应SELECT语句来实现.排序遵循ORDER BY,搜索WHERE并使用LEFT OUTER JOIN或使用ROW_NUMBER()OVER(…)构造对TOP(x),TOP(x)等构造进行分页.但这些都不是你问题的主题.所以我减少了对数据分页的简单模拟.
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方法从服务器获取数据,所以必须始终设置Web方法的所有输入参数.另一方面,jqGrid设置并不总是参数searchField,searchOper和searchString,但仅限于_search = true.例如,在第一次加载jqGrid时,_search = false和searchField,searchOper和searchString都没有在postData中定义.为了解决这个问题,我们用null初始化未定义的参数.
要实现排序,需要使用sidx(排序索引)和sord(排序方向：“asc”或“desc”)参数.
要实现搜索,需要使用其他参数_search,searchField,searchOper,searchString.
在高级搜索而不是searchField,searchString参数期间,必须使用参数过滤器(请参阅注释行).必须根据JSON解串器对数据进行解码.所以必须在jqgrid中设置multipleSearch：true.应该将serializeGridData函数替换为
serializeGridData: function (postData) {
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
}
并且应该将Web方法的原型更改为
public JqGridData TestMethod (int page,string 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.
