的jqGrid无法显示JSON数据

这真的让我疯了，我读过一些问题：的jqGrid无法显示JSON数据

他们没有正在为我的案件工作。我已经在http://jsonlint.com/上检查过我的json，并且它说有效的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>

请帮我解决这个问题，在此先感谢。

来源

2013-03-21 Bari

那么你有正确的答案在这里：[jqGrid不显示JSON数据]（http://stackoverflow.com/questions/5018177/jqgrid-not-displaying-json-data）。您的数据不包含分页信息，因此您必须将'page'，'total'和'records'定义放入'jsonReader'中。我觉得有必要将其标记为可能重复。 – tpeczek 2013-03-21 08:57:51

我还是什么都没有。桌子仍然空着。 – Bari 2013-03-21 09:33:08

您可以验证（使用Fiddler，FireBug等）请求正在进行并且正在返回正确的响应吗？ – tpeczek 2013-03-21 09:41:31

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

enter image description here

我只能除去的viewrecords选择复制，改变height: 300到height: "auto"有更好看。如果您从服务器一次加载所有数据，我建议您使用loadonce: true。在datatype将在第一次从服务器加载数据并且稍后排序之后将更改为"local"的情况下，数据的分页和过滤将在本地执行。

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

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

来源

2013-03-21 09:50:33 Oleg

谢谢你的回答。我试过[链接] http://stackoverflow.com/a/6969114/315935和浏览器说“HTTP状态代码0文本状态错误抛出”。发生什么事？ – Bari 2013-03-21 10:02:55

@barreybunshin：我建议你使用[Fiddler]（http://www.fiddler2.com/Fiddler2/version.asp）或[Firebug]（https://getfirebug.com/）或IE或Chrome的开发工具抓HTTP流量。这很重要**在服务器响应**中哪个值具有“Content-Type”HTTP标头。它应该是'application/json'。 – Oleg 2013-03-21 10:08:08

我检查了它与萤火虫，并得到我的JSON的数据在控制台>所有>响应。但是，表格仍然是空的。我将url更改为url：'json'，状态为OK。没有弹出错误。 – Bari 2013-03-21 10:14:22

您的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" 
      },

来源

2013-03-21 09:29:14 Kris

的jqGrid无法显示JSON数据

回答

相关问题