jqGrid不加载数据
我确信这是简单的,我错过了,但我似乎无法find它。 我有一个简单的jqGrid在这里指定:
$('#mainGrid').jqGrid({ datatype: 'local', colNames: ['id', 'name'], colModel: [ { name: 'id', index: 'id', width: 100 }, { name: 'name', index: 'name', width: 300 } ], rowNum: 9999, sortname: 'name', viewrecords: true, sortorder: 'asc', data: [{"id":"924c18a4-cad6-4b6a-97ef-f9ca61614530","name":"Pathway 1"},{"id":"54897f40-49ab-4abd-acac-6047006c7cc7","name":"Pathway 2"},{"id":"61542c48-102f-4d8e-ba9f-c24c64a20d28","name":"Pathway 3"},{"id":"c4ca9575-7353-4c18-b38a-33b383fcd8b2","name":"Pathway 4"}] });
这加载正确。 概念的简单certificate。 现在我尝试用一个对服务器资源的调用来replace本地数据:
$('#mainGrid').jqGrid({ url: 'AJAXHandler.aspx', datatype: 'json', colNames: ['id', 'name'], colModel: [ { name: 'id', index: 'id', width: 100 }, { name: 'name', index: 'name', width: 300 } ], rowNum: 9999, sortname: 'name', viewrecords: true, sortorder: 'asc' });
服务器资源返回相同的数据。 但是网格不加载数据。 (至less,它没有显示任何logging。)我已经用FireBug确认资源确实被调用,并且正在返回预期的数据。
起初我以为资源响应中的内容types应该改为application/json
,但是没有什么区别。 这个响应是否还有其他问题,阻止网格加载数据?
服务器资源的Firebug输出:
Response Headers Cache-Control private Content-Length 261 Content-Type text/html; charset=utf-8 Server Microsoft-IIS/6.0 MicrosoftSharePointTeamSe... 12.0.0.6219 X-Powered-By ASP.NET X-AspNet-Version 2.0.50727 Set-Cookie WSS_KeepSessionAuthenticated=80; path=/ Date Sat, 23 Apr 2011 14:35:43 GMT Request Headers Host cyber0ne.com User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16 Accept application/json, text/javascript, */*; q=0.01 Accept-Language en-us,en;q=0.5 Accept-Encoding gzip,deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive 115 Connection keep-alive X-Requested-With XMLHttpRequest Referer http://cyber0ne.com/dovetail_pages/Member/Pathways.aspx?MemberID=b428e0a7-dd55-de11-8e97-0016cfe25fa3 Cookie WSS_KeepSessionAuthenticated=80 Params _search false nd 1303569347783 page 1 rows 9999 sidx name sord asc Response [{"id":"4d4b8249-b5f9-4da6-aba2-bf3af588d560","name":"Pathway 1"},{"id":"230184e6-44cc-4274-97fd-b455440cd9c0","name":"Pathway 2"},{"id":"7f938218-b963-495f-9646-f3cfb1e63ea1","name":"Pathway 3"},{"id":"2b17f23e-5500-4b01-ac1c-df2de90dc511","name":"Pathway 4"}]
更新:
根据@Paul Creasey的回答,现在的回复内容是:
{"total":4,"page":1,"records":4,"rows":[{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"},{"id":"123ba476-1560-4148-ae96-968bdd10e190","name":"Pathway 2"},{"id":"43f5660b-141c-4ccc-848e-6b41667b399a","name":"Pathway 3"},{"id":"b0d21316-d07d-4b46-8011-89c3cb07a8f6","name":"Pathway 4"}]}
行为有轻微的变化。 网格现在说“加载”,但仍然不加载数据。
根据这里的文档,预期的json格式是:
{ "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [ {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"2", "cell":["cell21", "cell22", "cell23"]}, ... ] }
所以你的web服务应该返回这个:
{ "total": "4", "page": "1", "records": "4", "rows" : [ { "id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560", "name": "Pathway 1" }, { "id": "230184e6-44cc-4274-97fd-b455440cd9c0", "name": "Pathway 2" }, { "id": "7f938218-b963-495f-9646-f3cfb1e63ea1", "name": "Pathway 3" }, { "id": "2b17f23e-5500-4b01-ac1c-df2de90dc511", "name": "Pathway 4" } ] }
目前你只有行数组。
你可以实现自己的函数来读取JSON,但我从来没有这样做,请参阅上面的链接“jsonReaderfunction”部分。
编辑:
我最初错了,要么将repeatitems标志设置为false:
jsonReader : { repeatitems: false },
并使用上面的json(我想!)或返回这样的数据:
{ "total": "4", "page": "1", "records": "4", "rows" : [ { "id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560", "cells" : ["Pathway 1"] }, { "id": "230184e6-44cc-4274-97fd-b455440cd9c0", "cells" : ["Pathway 2"] }, { "id": "7f938218-b963-495f-9646-f3cfb1e63ea1", "cells" : ["Pathway 3"] }, { "id": "2b17f23e-5500-4b01-ac1c-df2de90dc511", "cells" : ["Pathway 4"] } ] }
我一直做后者,但我认为前者可能更好!
保罗的答案是绝对正确的。 你应该只使用jsonReader : {repeatitems: false}
。 我决定写一些额外的信息,只是为了清楚为什么 jqGrid无法在一开始就读取您的原始数据。 我想另外描述如何jsonReader
参数可以帮助读取从服务器返回的JSON或XML数据。
首先你可以读取jqGrid中几乎所有的inputJSON数据 。 您应该只定义描述如何读取数据的jsonReader
参数。 例如,原始格式的数据可以由jqGrid根据以下jsonReader
:
jsonReader: { repeatitems: false, page: function() { return 1; }, root: function (obj) { return obj; }, records: function (obj) { return obj.length; } }
你可以在演示中看到真正的方法。 你可以在我以前的回答中看到更多关于这个的地方,我build议在青年时期使用函数作为jsonReader
参数。
为什么需要在服务器响应中以非常奇怪的forms提供数据? 为什么需要jsonReader
? 原因是jqGrid允许服务器实现sorting , 分页和可选的过滤/search 。 所以对服务器的请求不是像“请给我一个用户列表”,而是更像是“请按姓氏sorting用户,并得到页面由10行组成的第5页的数据”。 页面大小(10的情况下)将从jwGrid寻呼机的combobox中获得。 rowList
数组参数定义了可能值的列表,用户可以select他/她喜欢的页面大小。
返回的数据不仅包含最多10个请求的数据行,而且还包含额外的参数:“total”,“page”和“records”,它们描述了将被填充到寻呼机中的一些字段:
构build网格的数据包含对象数组。 每个数组项都包含一个网格行的信息。 数组项可以是具有命名属性的对象
{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"}
或者像这样的对象
{"id":"55132687-b0bd-4c89-97cb-122d127429eb", cell:["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]}
或者像这样的数组
["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]
要以第一种格式读取数据,应使用jsonReader:{repeatitems:false}
。 第二种格式是默认的,读取的数据不需要定义任何jsonReader
。 要读取最后一种格式的数据,我们应该定义jsonReader:{cell:''}
,另外还要为id
列定义key:true
。 最后一种格式是最紧凑的,但只有jqGrid的列中有一个可以解释为id的唯一数据时才可以使用。 这个id
很重要,因为jqGrid使用<tr>
元素来创buildHTML表格,其中包含完整的id
。 不允许在一个页面内重复的id对应于HTML规范。
最后一句话。 如果您不能或不想在服务器端实现分页和sorting,则应该返回服务器响应中的所有数据,并使用loadonce:true
参数。 这将在第一次数据加载之后将jqGrid的datatype
参数更改为“local”。 之后,数据的sorting和分页将在jqGrid的JavaScript代码内完成。
我在Firefox的项目中遇到过类似的问题。 我正试图加载数据到页面加载jqgrid。 但是我只是看到“加载…”,没有数据在网格中。
我一步就解决了这个问题。 这可能听起来很愚蠢,但这正是我所做的工作:
我刚才注释掉了<head>
中指向js文件的<script>
标签: jquery.jqGrid.js
,因为我已经有了另外一个指向js文件的<script>
标签: jquery.jqGrid.min.js
你也需要确保脚本的顺序是正确的…首先加载jQuery,然后加载jqgrid文件。
这解决了我在Firefox中加载数据的问题。