jqGrid数据加载问题答案

【问题标题】：jqGrid data load issuejqGrid数据加载问题
【发布时间】：2012-12-24 21:54:53
【问题描述】：

我无法让我的数据显示在 jqgrid 中。我正在使用与此工作示例完全相同的代码：

我的数据不同，但实质上并非如此：

{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}

我讨厌重新打开同样的问题，但这让我非常沮丧。

编辑：这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>InfoMaker  Monitor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<!CDATA[
        jQuery(function () {
            'use strict';
            jQuery("#jsonmap").jqGrid({
            url: 'http://localhost:8888/nancy/readasjson'
            ,datatype: 'json'
            ,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
            // see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
            ,jsonReader : {
                 page: "page"
                , total: "total"
                , records: "records"
                , rows: "rows"
                ,cell: "cell"
                ,id: "id",
                }
            ,colNames: ['Report','File']
            ,colModel :[ 
               {name:'Report'  ,index:'Report', width:55} 
              ,{name:'File',index:'File', width:55} 
            ]
            ,rowNum:10
            ,rowList:[10,20,30]
            ,viewrecords: true
            ,loadComplete: function() {
              console.log("Load Complete");
              //console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
            }
            ,loadError: function(xhr,st,err) { 
                console.log(xhr.statusText);
                //$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); 
            }
            ,width: '900'
            ,height: 'auto'//'300'
            ,caption: 'My first grid'
          }); 
          jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
        });
    //]]>
    </script>
</head>
<body>
    <table id="jsonmap"><tr><td></td></tr></table>
    <div id="pjmap"></div>
</body>
</html>

这是数据现在的样子：

{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}

我很想分叉 jqgrid 源并向它添加一些 console.log 消息！因为在没有消息的情况下神秘地失败是采用的一个巨大障碍。

【问题讨论】：

Firebug 告诉你什么？你的代码是什么样的？
我用的是chrome调试，没有报错。
没有代码就帮不上忙。

标签： jqgrid

【解决方案1】：

您使用的 JSON 数据具有 另一种 格式，如 the referenced question，因此 jqGrid 无法读取您的数据。 jsonReader 选项描述了 jqGrig 的输入数据格式。如果rows 数组包含具有命名属性的对象，则应使用jsonReader: {repeatitems: false}。在这种情况下，colModel 参数应该包含带有 name: "Report" 和 name: "File" 的列。

您的 JSON 数据的下一个问题 - 它没有关于行项目的 id 信息。在这种情况下，jqGrid 将使用整数值 1、2、3... 作为 rowid。这种自动生成的 id 仅适用于每页一个网格。第二个网格将有 id 重复项。因此，建议在 JSON 输入的数组 rows 的每个项目中包含附加属性 id。

【讨论】：

谢谢！当我添加“id”字段时，它应该包含在 colModel 中吗？
越来越近了。我按照建议设置了 jsonReader，然后还在模式中添加了一个“id”字段。我应该在 colModel 中包含该字段吗？现在我收到此错误：未捕获的类型错误：无法读取未定义的属性“0”
@DanielWilliams：您不需要将id 添加到colModel。它将仅用于分配网格的<tr> 元素的id 属性值。如果您仍然收到错误，则应将当前代码附加到问题的文本中。
@DanielWilliams：您发布的代码仍然包含错误jsonReader（请参阅我的回答）。其他问题 - 您使用 url 包含 http://localhost:8888 前缀，由于可能存在 same origin policy 问题，应将其删除。