问题
this really make me crazy, i've read some question:
- how to display jqgrid from url (local data works, url data does not)
- jqGrid not displaying JSON data
- jqGrid not displaying JSON data
- jgGrid not displaying json data
none of them is working for my case. i already check my json on http://jsonlint.com/ and it says valid JSON. i want jqgrid to display table from localhost/mine/jqgrid/json which will output:
[{"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"}]
and this is my script:
<!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>
please help me to solve this, thanks in advance.
回答1:
I think that the code which you posted is almost correct. The demo uses your JSON data and almost your code. It displays
I removed only duplicates of viewrecords option and changed height: 300 to height: "auto" to have better look. I would recommend you to use loadonce: true if you load all data at once from the server. In the case the datatype will be changed to "local" after the first loading of data from the server and all later sorting, paging and filtering of data will be implemented locally.
I don't know what is the error in your code. One possible reason could be wrong HTTP header in the server response, so the JSON response will be interpreted by jQuery as XML or HTML data. I recommend you additionally include loadError callback to have more information about the error if the grid still stay empty. Look at the answer for more details.
By the way I posted the suggestion (see the src-file) which would allows autodetection of different variation of input JSON format. I hope that the suggestion will be accepted by trirand and one will see much less questions about problems with reading of JSON data.
回答2:
Your json data should be like this
{
"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"}]
}
And change
jsonReader : {
repeatitems: false,
id: "id",
root: function (obj) {
return obj;
}},
to
jsonReader : {
repeatitems: false,
id: "id"
},
来源：https://stackoverflow.com/questions/15542760/jqgrid-fail-to-display-json-data