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

您可以在 the demo 上看到这种方法确实有效。您可以在我的 old answer 中阅读更多相关信息。我建议使用函数作为 jsonReader 的参数在年轻人这样的情况下。

为什么需要在服务器响应中以如此奇怪的形式提供数据？为什么jsonReader需要吗？原因是jqGrid允许服务器实现排序、分页以及可选的过滤/搜索。因此，对服务器的请求不像“请给我提供用户列表”，而更像是“请按姓氏对用户进行排序，并给我提供数据的第 5 页，该页由 10 行组成” ”。页面大小(本例中为 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:''}另外key:true对于id柱子。最后一种格式是最紧凑的，但只有当 jqGrid 列中的一个具有可以解释为 id 的唯一数据时才可以使用它。 id很重要，因为 jqGrid 使用 <tr> 构建 HTML 表格元素恰好具有 id哪一个回帖。根据 HTML 规范，一页内不允许有重复的 id。

最后一句话。如果您不能或不想在服务器端实现分页和排序，您应该返回服务器响应中的所有数据并使用 loadonce:true jqGrid的参数。这将随后更改 datatype第一次数据加载后，jqGrid 的参数设置为“local”。之后，数据的排序和分页将在jqGrid的JavaScript代码内部完成。