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中加载数据的问题。