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 }; }
其中类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中发布相应的示例(参见更新的部分)。
这有点晚了,但对于任何未来寻求解决方案的人来说,这都是一个超级简单的解决方案:
gridComplete: function(){ $("#yourGridID").setGridParam({datatype: 'local'}); }
而已。 我正在使用3.7.2,不能代表任何其他版本。 问题(显然)源于’loadonce’仅使用预定义的数据类型值,而函数则不然。 我相信其他内置值也会起作用,但“本地”是有道理的。
这对我有用。 我遇到了分页和排序无法正常工作的问题。 可能是因为在.net中的JSON对象中发回的.d和__type项。 但是,使用此示例中的额外配置。 这有效!
我疯了。 如果您使用.Net作为您的Web服务,这是配置网格的方法。 它被配置为解析并正确地将JSON对象中的数据元素设置为网格中所需的正确位置,以允许分页和排序工作。
我不得不发表评论,因为我确信有一些人想要使用这个网格但是使用.Net作为他们的网络服务。