jqgrid 无法显示 json 数据答案

【问题标题】：jqgrid fail to display json datajqgrid 无法显示 json 数据
【发布时间】：2013-03-10 16:21:24
【问题描述】：

这真的让我抓狂，我读过一些问题：

它们都不适合我的情况。我已经在http://jsonlint.com/ 上检查了我的 json，它说 valid JSON。我希望 jqgrid 显示来自localhost/mine/jqgrid/json 的表格，它将输出：

[{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
{"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
{"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
{"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
{"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}]

这是我的脚本：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {nocache}
        <title>{$title}</title>
        {/nocache}
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!--jqGrid sangat tergantung kepada CSS jquery-ui-->
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/jquery-ui-custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/ui.jqgrid.css" />  
        <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 1em;
        }
        </style> 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery-ui-custom.min.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
        <!--prevent Smarty to parsing--> 
         {literal}
        <script type="text/javascript">
        $(function(){ 
          $("#list").jqGrid({
            //ini buat paging, value nya adalah ID dari HTML
            pager: '#pager',
            url:'localhost/mine/jqgrid/json',
            datatype: "json",
            height: 300,
            colNames:['ID','Inv Date','Name', 'Note','Amount','Tax','Total'],
            /**
             * to able to sort the right way, u must include sorttype:'int' for integer field
             */
            colModel :[ 
              {name:'id', index:'id',width:20, sorttype:'int'},
              {name:'invdate', index:'invdate', width:55}, 
              {name:'name', index:'name', width:90}, 
              {name:'note', index:'note', width:80, align:'right'}, 
              {name:'amount', index:'amount', width:80, align:'right'}, 
              {name:'tax', index:'tax', width:80, align:'right'}, 
              {name:'total', index:'total', width:150, sortable:true} 
            ],
            rowNum: 10,
            rowList:[10,20,30,40,50],
            recordpos: 'right',
            viewrecords: true,
            sortorder: "desc",
            sortname: "id",
            sorttype: "integer",
            viewrecords: true,
            multiselect: false,
            caption: "Manipulating JSON Data",
            recordtext: "Lihat {0} - {1} dari {2}",
            emptyrecords: "Tidak ada data",
            loadtext: "Loading...",
            pgtext : "Page {0} of {1}",
            jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},    
          });
        });
        </script>
        {/literal}
        <!--end of parsing-->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!--this is it, jqGrid load in here-->
        <table id="list"><tr><td/></tr></table> 
        <div id="pager"></div> 
        <!--end of jqGrid-->
        <p>{#app_name#}</p>
    </body>
</html>

请帮我解决这个问题，提前谢谢。

【问题讨论】：

你在这里有正确的答案：jqGrid not displaying JSON data。您的数据不包含分页信息，因此您必须将page、total 和records 定义放入您的jsonReader。我觉得有必要将其标记为可能重复。
我还是一无所获。桌子还是空的。
您能否验证（使用 Fiddler、FireBug 等）正在发出请求并返回正确的响应？
我不知道如何使用 firebug 进行验证，但我有我的屏幕截图i49.tinypic.com/17x2es.png
好吧，除了 URL 创建错误之外，屏幕截图并没有说明太多，它是 http://localhost/mine/jqgrid/localhost/mine/jqgrid/json，我相信这不是您想要的。请像这样更改您的配置：url:'http:/localhost/mine/jqgrid/json',。如果涉及到 FireBug，您应该查看 Net 选项卡下，您应该会在其中看到有关每个请求的所有详细信息。

标签： json jqgrid jqgrid-php

【解决方案1】：

你的json数据应该是这样的

{
"page":"1",
   "total":2,
   "records":"13", 
   "rows": [{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
            {"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
            {"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
            {"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
            {"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}] 
}

然后改变

jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},

到

jsonReader : { 
             repeatitems: false,
             id: "id"
             },

【讨论】：

【解决方案2】：

我认为您发布的代码几乎是正确的。 The demo 使用您的 JSON 数据和几乎您的代码。它显示

我只删除了 viewrecords 选项的重复项，并将 height: 300 更改为 height: "auto" 以获得更好的外观。如果您一次从服务器加载所有数据，我建议您使用loadonce: true。如果第一次从服务器加载数据后，datatype 将更改为"local"，并且以后所有的数据排序、分页和过滤都将在本地实现。

我不知道你的代码有什么错误。一种可能的原因可能是服务器响应中的 HTTP 标头错误，因此 JSON 响应将被 jQuery 解释为 XML 或 HTML 数据。如果网格仍然为空，我建议您另外包含loadError 回调以获取有关错误的更多信息。查看the answer了解更多详情。

顺便说一下，我发布了the suggestion（请参阅the src-file），这将允许自动检测输入 JSON 格式的不同变化。我希望这个建议会被 trirand 接受，并且人们会看到更少关于读取 JSON 数据的问题的问题。

【讨论】：

感谢您的回答。我尝试了 [link]stackoverflow.com/a/6969114/315935，浏览器显示“抛出 HTTP 状态代码 0 文本状态错误”。发生了什么？
@barreybunshin：我建议你使用Fiddler 或Firebug 或IE 或Chrome 的开发者工具来捕获HTTP 流量。 服务器响应中有Content-Type HTTP 标头的值很重要。应该是application/json。
我用萤火虫检查了它，并在控制台>所有>响应中获取了我的 JSON 数据。但是，桌子仍然是空的。我将 url 更改为 url:'json' 并且状态正常。没有出现错误弹出窗口。
重要的是不是 HTTP 响应的正文，而是 HTTP 标头。您应该检查 HTTP 响应的标头并找到 Content-Type 的值。请参阅the Firebug documentation 中的“检查 HTTP 标头”。
@barreybunshin：您可以看到the demo 确实在网格中显示了数据。您可以将您的演示的确切 HTTP 响应与我的进行比较。即使服务器返回Content-Type: text/plain jQuery 也能正确读取数据。目前还不清楚您使用的是哪个版本的 jqGrid、jQuery 和 jQuery UI。如果服务器响应中有Content-Type: application/json，所有版本的jQuery都会正确读取响应。