jqgrid无法显示json数据 [英] jqgrid fail to display json data
问题描述
这真的让我发疯，我已经读过一个问题:
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
他们都没有为我的案子工作.我已经在 http://jsonlint.com/上检查了我的JSON，并说有效的JSON >.我希望jqgrid显示localhost/mine/jqgrid/json中的表，该表将输出:
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"}]
这是我的脚本:
<!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.
推荐答案
我认为您发布的代码几乎是正确的. 该演示使用您的JSON数据和几乎您的代码.它显示
I think that the code which you posted is almost correct. The demo uses your JSON data and almost your code. It displays
我仅删除了viewrecords选项的重复项，并将height: 300更改为height: "auto"以具有更好的外观.如果您一次从服务器加载所有数据，我建议您使用loadonce: true.如果datatype将在第一次从服务器加载数据后更改为"local"，并且以后将在本地实现所有数据的排序，分页和过滤.
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.
我不知道您的代码中有什么错误.一个可能的原因可能是服务器响应中的HTTP标头错误，因此jQuery将JSON响应解释为XML或HTML数据.我建议您另外包含loadError回调，以在网格仍为空的情况下获得有关该错误的更多信息.请查看答案以获取更多详细信息.
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.
这篇关于jqgrid无法显示json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
