在 jqGrid 中加载 JSON 数据答案

【问题标题】：Loading JSON data in jqGrid在 jqGrid 中加载 JSON 数据
【发布时间】：2012-03-27 17:33:24
【问题描述】：

在 jqGrid 中显示我的 json 数据时遇到问题。

我在这个论坛上进行了很多搜索，并尝试了各种形式来使其发挥作用。如果这个问题已经得到解答，我深表歉意，但我真的需要这方面的帮助。

在服务器页面上，我只使用 JavaScriptSerializer 发送数据和带有默认参数的 jsonreader 函数（这工作正常）。

我现在需要分页并更改了我的服务器页面代码以使用 sidx、sord、page、rows 参数。

来自服务器的结果字符串如下所示：

{"total":"344","page":"1","records":"8577","root":[{"Id":"1","SerialNumber":"132","Name":"ServerName"},...]}

这是我的 jQuery 代码：

$("#list").jqGrid({
        datatype: "json",
        mtype: 'GET',
        url:'https://server/handlerpage.ashx',
        colNames:['Id','SerialNumber','Name'],
        colModel :[         
                {name:'Id', index:'Id', jsonmap:"Id", width:20},
                {name:'Name', index:'Name', jsonmap:"Name", width:120},
                {name:'SerialNumber', index:'SerialNumber', jsonmap:"SerialNumber", width:100}],    
        jsonreader: {repeatitems:false,id:'Id',root:'root'},
        pager: '#pager',
        rowNum:25,
        rowList:[25,50,75,100],
        sortname: 'Id',
        viewrecords:true,
        gridview: true,
        height:"400",
        width:"700",
        caption: 'Select from existing server',
        loadtext:'Loading, please wait'
      }).navGrid("#pager", { edit: false, add: false, search: true, del: false });

【问题讨论】：

代码中的主要错误是使用jsonreader 而不是jsonReader。您也可以删除所有jsonmap 属性和index。我建议你也不要像'https://server/handlerpage.ashx' 那样使用url。对应于 Ajax Same origin policy，您必须使用与当前页面相同的 https://server/ 前缀。所以你最好使用url: 'handlerpage.ashx' 或url: '/handlerpage.ashx'。
谢谢 Oleg，我测试了 jsonReader（大写 R），它确实有效。还更改了网址以符合政策并且也有效。
不客气！有时错误很小（只有一个字母），但因此很难找到。

标签： jqgrid jsonreader

【解决方案1】：

为了使用 json 数据作为来自查询的响应，响应的格式必须正确。很难确定什么是正确的响应以及如何从文档中获取它。由于您的服务器设置生成警告作为响应的一部分，这将导致网格无法加载，因此可能会出现更多问题。

根据文档，这是默认的 json 阅读器，这意味着如果您正确格式化响应，则不需要添加任何内容/自定义 json 阅读器。

jsonReader : { 
  root: "rows", 
  page: "page", 
  total: "total", 
  records: "records", 
  repeatitems: true, 
  cell: "cell", 
  id: "id",
  userdata: "userdata",
  subgrid: { 
     root:"rows", 
     repeatitems: true, 
     cell:"cell" 
  }

首先确保您的响应格式正确。 {"page":1,"total":1,"records":"2","rows":[{"id":"1","cell":["1","mydata1"]},{"id":"2","cell":["2","mydata2"]}]}

文档页面上没有提供示例，但如果您的网格中只有两列，则上述内容是正确的。您需要获取服务器查询/解析服务器查询和传递给运行服务器端脚本的页面的值以返回此格式。文档中的 example.php 页面为您提供了所需的所有值。

此代码将为您提供正确的标题，以避免错误警告并与上面的响应相匹配。另请注意，在文档中，他们没有在关联数组索引名称的索引周围添加撇号。那将失败。

header('Content-type: application/json');$responce = new stdClass();$responce->page = $page;$responce->total = $total_pages;$responce->records = $count;$i=0;while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {$responce->rows[$i]['id']=$row['ID'];$responce->rows[$i]['cell']=array($row['ID'],$row['entity_name']); $i++; } echo json_encode($responce);

重新整理文档中缺少的内容（我可能只是错过了它们，即使 jQgrid 的文档是史诗/大师作品）： 1. 没有提到需要 json 的 header 语句（XML 示例很清楚） 2. 没有工作返回的字符串应该是什么样子的示例 3. 关联数组索引的格式不正确。 4. 没有提及如何避免在响应中返回 PHP 警告

【讨论】：

【解决方案2】：

试试下面的

jsonReader: {
    root: 'rows',
    page: 'page',
    total: 'total',
    records: 'records',
    repeatitems: true,
    cell: 'cell',
    id: 'id',
    userdata: 'userdata'
}

【讨论】：

那也没用。我想知道 'root':[{...}] 是否错误，当我在 jsonReader 中更改根标签 'rows' 或其他值时，网格会显示加载字符串并停留在那里。
我稍微改了一下，它起作用了： jsonReader: {root: 'rows',page: 'page',total: 'total',records: 'records',repeatitems: false,id: 'id'} 谢谢两颗种子

【解决方案3】：

请确保服务器端脚本返回正确的带有HEADERS的json字符串

进一步检查demo 站点和 JSON 示例

【讨论】：

我已经尝试过 application/json 和 text/json 但没有解决我的问题。我也尝试了 text/plain （在分页前第一次工作），但也没有用。有趣的是分页栏工作正常，我可以看到页数并更改它们，就像网格不想读取服务器响应的根部分一样。
我使用过：text/plain、text/json、application/json，并且在更改 jsronReader 后它们都可以正常工作。谢谢。