jqgrid setGridParam数据类型：local

当我使用寻呼机翻阅记录时，我不想点击服务器并带回每一行。 我读到如果我在.ajax函数的完整博客中设置datatype = local并且如果我设置loadonce：true那么我应该能够避免必须等待网格重新加载数据。

但是，当我执行这些操作时，网格不会转到下一页。 它只是挂…
我究竟做错了什么？

jQuery(document).ready(function () { jQuery("#list").jqGrid({ datatype: processrequest, mtype: 'POST', jsonReader: { root: "rows", //arry containing actual data page: "page", //current page total: "total", //total pages for the query records: "records", //total number of records repeatitems: false, id: "ID" //index of the column with the PK in it }, colNames: ['Name', 'Title'], colModel: [ { name: 'name', index: 'name', width: 250 }, { name: 'title', index: 'title', width: 250 } ], pager: '#pager', rowNum: 10, rowList: [10, 20, 30], sortorder: "desc", viewrecords: true, height: '250px', caption: 'My first grid', loadonce: true }).navGrid('#pager', {edit: false, add: false, del: false}); }); function processrequest(postdata) { ... $.ajax({ ... complete: function (jsondata, stat) { if (stat == "success") { var thegrid = jQuery("#list2")[0]; var jsonObject = (eval("(" + jsondata.responseText + ")")); thegrid.addJSONData(jsonObject.d); $(".loading").hide(); } else { $(".loading").hide(); alert("Error with AJAX callback"); } $("#list").setGridParam({ datatype: 'local' }); } }); } 

Answer 1

有一些误解。 如果使用datatype: local则必须使用addRowData等方法addRowData填充jqGrid，或者使用data参数设置数据一次（对于jqGrid版本3.7及更高版本）。 因此，对jqGrid使用datatype: local不会加载任何数据本身，并且将忽略您的datatype: processrequest参数。

如果你想使用自jqGrid版本3.7以来支持的loadonce: true参数，你应该拥有jq或XML的jqGrid的所有参数（例如datatype: json ） 和附加参数 loadonce: true 。 然后在第一次加载数据后，jqGrid会将数据datatype: local切换为datatype: local ，之后它将在服务器上独立工作，但忽略一些参数（如datatype: processrequest在您的情况下为datatype: processrequest ）。

还有一点小话。 您在示例中使用的jsonReader的大多数属性都是默认的（请参阅此Wiki ）。 您使用的参数将与默认属性组合使用，因此使用jsonReader: { repeatitems: false, id: "ID"}参数就足够了jsonReader: { repeatitems: false, id: "ID"}

更新 ：好的杰夫。 在我看来，要解决您的问题，您需要从双方获得更多代码示例：客户端和服务器。 这是我为您创建并测试的一个小例子。

首先是服务器端。 在ASMX Web服务中，我们定义了一个Web方法，用于为您的表生成测试数据：

 public JqGridData TestMethod() { int count = 200; List gridRows = new List (count); for (int i = 0; i < count; i++) { gridRows.Add (new TableRow () { id = i, cell = new List (2) { string.Format("Name{0}", i), string.Format("Title{0}", i) } }); } return new JqGridData() { total = 1, page = 1, records = gridRows.Count, rows = gridRows }; } 

其中类JqGridData和TableRow的定义如下：

 public class TableRow { public int id { get; set; } public List cell { get; set; } } public class JqGridData { public int total { get; set; } public int page { get; set; } public int records { get; set; } public List rows { get; set; } } 

在这里你可以看到，web方法TestMethod没有参数并回发完整的数据。 数据的分页，排序和搜索将由jqGrid（3.7或更高版本）完成。

要读取此类数据并放入jqGrid，我们可以执行以下操作：

 $("#list").jqGrid({ url: './MyTestWS.asmx/TestMethod', datatype: 'json', mtype: 'POST', loadonce: true, ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { 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; } }, 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}, {},{},{},{multipleSearch : true}); 

关于jqGrid定义的一些评论：

要通过JSON与ASMX Web服务进行通信，需要在相应的jQuery.ajax请求中执行以下操作：

• dataType: 'json'必须设置。
• contentType:'application/json; charset=utf-8' 必须设置contentType:'application/json; charset=utf-8' 。
• 发送到服务器的数据必须是JSON编码的。

要做所有这些，我使用ajaxGridOptions datatype ， ajaxGridOptions和serializeGridData参数。 我使用JSON.stringify函数进行JSON编码（相应的JavaScript可以从这里下载）。

然后必须解码接收的数据。 我使用我最喜欢的jqGridfunction – 带有函数的jsonReader （参见这篇SOpost和这个wiki ）。

最后我们使用loadonce: true将loadonce: true的datatype从'json'更改为'local' ，我们可以立即使用自jqGrid版本3.7以来存在的本地分页，排序和高级搜索的所有优势。

如果您确实希望使用ASMX Web服务进行服务器端分页，排序和搜索（或高级搜索），则也可以。 为了在这里保存一个小地方并分开代码示例，我将在x pager的另一个问题jqgrid页面1中发布相应的示例（参见更新的部分）。

Answer 2

这有点晚了，但对于任何未来寻求解决方案的人来说，这都是一个超级简单的解决方案：

 gridComplete: function(){ $("#yourGridID").setGridParam({datatype: 'local'}); } 

而已。 我正在使用3.7.2，不能代表任何其他版本。 问题（显然）源于’loadonce’仅使用预定义的数据类型值，而函数则不然。 我相信其他内置值也会起作用，但“本地”是有道理的。

Answer 3

这对我有用。 我遇到了分页和排序无法正常工作的问题。 可能是因为在.net中的JSON对象中发回的.d和__type项。 但是，使用此示例中的额外配置。 这有效！

我疯了。 如果您使用.Net作为您的Web服务，这是配置网格的方法。 它被配置为解析并正确地将JSON对象中的数据元素设置为网格中所需的正确位置，以允许分页和排序工作。

我不得不发表评论，因为我确信有一些人想要使用这个网格但是使用.Net作为他们的网络服务。