jqGrid不加载数据

Question

我确信这很简单,我很遗憾,但我似乎无法找到它.我在这里指定了一个简单的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"}]
});

这正确加载.简单的概念证明.现在我尝试通过调用服务器资源来替换本地数据:

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

服务器资源返回相同的数据.但是网格没有加载数据.(至少,它没有显示任何记录.)我已经确认FireBug确实正在调用资源并返回预期的数据.

起初我认为应该将资源响应中的内容类型更改为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"}]}

行为略有改变.网格现在显示"正在加载"但仍然不加载数据.

Answer 1

保罗的答案是绝对正确的.你应该使用jsonReader : {repeatitems: false}.我决定写一些更多的附加信息,只是为了清楚为什么 jqGrid在开始时无法读取原始数据.我还想描述jsonReader参数如何帮助读取从服务器返回的JSON或XML数据.

首先,您可以在jqGrid中读取几乎所有输入JSON数据.你应该只定义了jsonReader其描述参数如何数据应该被读取.例如,jqGrid可以读取原始格式的数据,具体如下jsonReader:

jsonReader: {
    repeatitems: false,
    page: function() { return 1; },
    root: function (obj) { return obj; },
    records: function (obj) { return obj.length; }
}

你可以在演示中看到真正有效的方式.您可以在我的旧答案中阅读更多相关信息,我建议jsonReader在年轻人的情况下使用函数作为参数.

为什么需要在服务器响应中以如此奇怪的形式提供数据呢？为什么jsonReader需要？原因是jqGrid允许服务器实现排序,分页和可选的过滤/搜索.所以对服务器的请求不像"请给我用户列表",但更像是"请按姓氏对用户进行排序,并获取页面由10行组成的数据的第5页".页面大小(在这种情况下为10)将从jwGrid寻呼机的组合框中获取.该rowList阵列参数定义可能值的列表,用户可以选择页面大小,他/她喜欢.

返回的数据不仅应包含最多10个请求的数据行,还应包含树的附加参数:"total","page"和"records",它们描述了将在寻呼机中填充的一些字段:

构建网格的数据包含对象数组.每个数组项都包含有关一个网格行的信息.数组项可以是具有命名属性的对象

{"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:''}和另外.最紧凑的最后一种格式,但只有当jqGrid列中的一个具有可以解释为id的唯一数据时,才能使用它.这很重要,因为jqGrid构建HTML表格,其中元素恰好包含哪一个回发.允许在一个页面内没有id重复项对应于HTML规范.key:trueidid<tr>id

最后的评论.如果您不能或不想在服务器端实现分页和排序,则应返回服务器响应中的所有数据并使用loadonce:truejqGrid的参数.这将datatype在第一次数据加载后将jqGrid 的参数更改为"local".之后,数据的排序和分页将在jqGrid的JavaScript代码中完成.