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' }); } }); } 

有一些误解。 如果使用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 }; } 

其中类JqGridDataTableRow的定义如下:

 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 datatypeajaxGridOptionsserializeGridData参数。 我使用JSON.stringify函数进行JSON编码(相应的JavaScript可以从这里下载)。

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

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

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

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

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

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

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

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

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