的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數據

回答

相關問題