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允许服务器实现排序，分页以及可选的过滤/搜索。所以对服务器的请求不像“请让我的用户列表”，但更像是“请按姓氏对用户进行排序，并获取页面由10行组成的数据的第5页”。页面大小（在这种情况下为10）将从jwGrid寻呼机的组合框中获取。 rowList数组参数定义了可能的值列表，用户可以选择他/她喜欢的页面大小。

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

enter image description here

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

{"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一个帖子。允许在一个页面内没有id重复项符合HTML规范。

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

Answer 2

根据文档here，预期的json格式为：

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

因此，您的网络服务应该返回：

{
    "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，但我从未这样做过，请参阅上面链接的“jsonReader as Function”部分。

修改

我最初错了，你应该将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"] } ] }

我总是做后者，但我认为前者可能更好！

Answer 3

我在firefox的项目中遇到了类似的问题。我试图在页面加载时将数据加载到jqgrid。但我只是看到“正在加载......”＃39;网格中没有数据。

我只需一步就解决了。这可能听起来很愚蠢，但这正是我为了让它发挥作用而做的事情：

我刚刚在我的<script>中注释了<head>标记指向js文件：jquery.jqGrid.js，因为我已经有另一个<script>标记指向js档案：jquery.jqGrid.min.js

此外，您需要确保脚本的顺序正确...首先加载jquery，然后加载jqgrid文件。

这解决了我在firefox中加载数据的问题。

jqGrid不加载数据

3 个答案: