我试图弄清楚如何使用 jqGrid 的分页功能。目前我被困在第 1 页，共 4 页。无论我是否按下下一步按钮。它只停留在 1 上。
我正在使用带有 Web 服务的 ASP.Net 来填充我的 JSON 数据。如何从客户端捕获事件以填充 Web 服务上的属性以恢复正确的值？
任何帮助表示赞赏。
问问题
17088 次
2 回答
18
如果按下“下一步”按钮，则会向服务器发送一个新请求。该请求将包含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)withLEFT 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 方法从服务器获取数据，所以必须始终设置 web 方法的所有输入参数。另一方面，jqGrid 设置的参数并不总是searchField,searchOper和searchString，而仅当_search=true. 例如，在第一次加载 jqGrid 时，_search=falseandsearchField和searchOperandsearchString没有在postData. 为了解决这个问题，我们用 初始化未定义的参数null。
要实现排序，需要使用sidx(sort index) 和sord(sort direction: "asc"or "desc") 参数。
要实现搜索需要使用其他参数_search, searchField, searchOper, searchString。
在高级搜索而不是 searchField, searchOper,searchString参数期间，filters必须使用该参数（参见注释行）。必须根据 JSON 反序列化器对数据进行解码。所以必须multipleSearch : true在jqgrid中设置。该serializeGridData功能应替换为
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 方法的 jqGrid 用法。
我在这里使用了从服务器发送到客户端的最简单的数据，其中id包含主要数据之外的附加数据。如果表中的一列是id，则可以稍微减少发送到服务器的数据。有关更多详细信息，请参阅Jqgrid 3.7 在 Internet Explorer 中不显示行。
于 2010-07-01T20:47:21.647 回答
0
好的，我正在回答这个问题，因为我接受了 Oleg 上面所说的内容，但弄清楚了他的意思。
我的 .ajax 调用包含在一个将 postdata 作为参数传递的函数中。我找不到有关该参数的任何文档，但我认为这可能是包含页面值的地方。正如你所看到的，我用 postdata.page 和 low 做了一个警报，结果我得到了一个值（基于单击下一个按钮）。
所以我在我的 web 服务中创建了一个名为 page (integer) 的参数。
顺便说一句，您将一个整数值从 jQuery 传递到您的 ASP.Net 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");
}
}
});
}
于 2010-07-01T22:12:59.733 回答