2016-09-28 169 views
0

我無法讓jqGrid顯示我的數據。當我點擊標題時,它顯示沒有記錄查看錶格的底部,但我知道情況並非如此。我嘗試顯示的Json來自一個url,並且來自該URL的Json正在使用golang從mysql數據庫中提取。我正在使用jquery jqGrid版本4.4.3。jqGrid沒有顯示任何數據

這是我的代碼,以顯示錶和功能HTML網頁

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script type="text/ecmascript" src="jquery/js/jquery-1.7.2.min.js"></script> 
<script type="text/ecmascript" src="jquery/js/i18n/grid.locale-en.js"></script> 
<script type="text/ecmascript" src="jquery/js/jquery.jqGrid.min.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="jquery/css/ui.jqgrid.css"/> 
<link rel="stylesheet" type="text/css" media="screen" href="jquery/css/jquery-ui.css" /> 

<meta http-equiv="content-type" content="text/html" charset="UTF-8"> 
<title>IPAM</title> 




</head> 
<body> 

<table id="jqGrid"></table> 
<div id="jqGridPager"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#jqGrid").jqGrid({ 
     url:'http://localhost:1323/api/v1/leases', 
     mtype: "GET", 
     datatype: 'jsonString', 
     jsonReader:{ 
      repeatitems: false, 
      id: "address", 
      }, 
     colModel: [ 
      {label: 'address', index:'address', key: true, width: 100}, 
      {label: 'client_id', name:'client_id', width: 150}, 
      {label: 'expire', name:'expire', width: 150}, 
      {label: 'fqdn_fwd', name:'fqdn_fwd', width: 150}, 
      {label: 'fqdn_rev', name:'fqdn_rev', width: 150}, 
      {label: 'hostname', name:'hostname', width: 150}, 
      {label: 'hwaddr', name:'hwaddr', width: 150}, 
      {label: 'state', name:'state', width: 150}, 
      {label: 'subnet_id', name:'subnet_id', width: 150}, 
      {label: 'valid_lifetime', name:'valid_lifetime', width: 150}, 
     ], 
     page: 1, 
     scroll: 1, 
     viewrecords: true, 
     width: 780, 
     height: 250, 
     rowNum: 20, 
     pager: "#jqGridPager" 
    }); 

}); 



</script> 




</body> 
</html> 

這是從一個MySQL數據庫拉昇並顯示在URL的JSON我打電話

([{"address":"178795010","client_id":null,"expire":"2016-09-26 16:56:32","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-20009.ipam.bskyb","hwaddr":"0800272022E6","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795011","client_id":null,"expire":"2016-09-26 16:58:48","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-18992.ipam.bskyb","hwaddr":"0800270FB593","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795012","client_id":null,"expire":"2016-09-26 17:13:55","fqdn_fwd":"1","fqdn_rev":"1","hostname":"dhcp-client1.ipam.bskyb","hwaddr":"0800275EA5B9","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795013","client_id":null,"expire":"2016-09-26 16:56:17","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-10873.ipam.bskyb","hwaddr":"0800275FCA93","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795018","client_id":null,"expire":"2016-09-26 17:06:16","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-24830.ipam.bskyb","hwaddr":"080027707E62","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"3232250120","client_id":null,"expire":"2016-09-26 16:17:15","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobtheblob7.ipam.bmarkskyb","hwaddr":"080027063AD9","state":"0","subnet_id":"12","valid_lifetime":"100"},{"address":"3232250122","client_id":null,"expire":"2016-09-26 16:17:22","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobtheblob8.ipam.bmarkskyb","hwaddr":"800027A5E27A","state":"0","subnet_id":"12","valid_lifetime":"100"}]); 
+0

你嘗試使用來自同一網站上的數據** **?在這種情況下,您應該從URL中移除「http:// localhost:1323」前綴。下一個問題:'datatype:'jsonString''是錯誤的。如果你從服務器加載數據,那麼你應該使用'datatype:'json''。不推薦使用'scroll:1',但'loadonce:true'可能是你需要的。另一個建議:不要使用復古版本4.4.3,這是很久以來不支​​持的。我開發了jqGrid的[免費jqGrid](https://github.com/free-jqgrid/jqGrid),它與4.4.3兼容。我建議你升級到免費的jqGrid – Oleg

+0

請參閱[這裏](http://free-jqgrid.github.io/getting-started/index.html)免費使用jqGrid的第一步。 [wiki](https://github.com/free-jqgrid/jqGrid/wiki)以及每個發佈版本的自述文件提供了更多信息。 – Oleg

+0

@Oleg謝謝你的建議,我現在在瀏覽器中加載頁面時出現這個錯誤:parsererror:錯誤:jQuery112402678749294365155_1475059615993不叫200成功 – computerNoob

回答

0

您需要設置

mtype: "GET", 
datatype: "jsonp", 

在你的jqGrid配置

工作演示:

http://jsfiddle.net/dipakthoke07/vwb1c0mk/76/

+0

@computerNoob請嘗試按照演示中所示進行配置。 –

+0

如果我是正確的,那麼您給予的演示是顯示不是來自url的數據,我的目標是使網址中的數據充滿網格。道歉,如果這不明確,或者如果我從您的答案缺少的東西 – computerNoob

+0

你還沒有配置「colNames」。 –