的jqGrid无法显示JSON数据
这真的让我疯了,我读过一些问题:的jqGrid无法显示JSON数据
- 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
显示表,该表将输出:
[{"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>
请帮我解决这个问题,在此先感谢。
我认为你发布的代码几乎是正确的。 The demo使用您的JSON数据和几乎你的代码。它显示
我只能除去的viewrecords
选择复制,改变height: 300
到height: "auto"
有更好看。如果您从服务器一次加载所有数据,我建议您使用loadonce: true
。在datatype
将在第一次从服务器加载数据并且稍后排序之后将更改为"local"
的情况下,数据的分页和过滤将在本地执行。
我不知道代码中的错误是什么。一个可能的原因可能是服务器响应中的HTTP标头错误,所以JSON响应将被jQuery解释为XML或HTML数据。我建议您另外包含loadError
回调以获取有关错误的更多信息,如果网格仍然为空。请参阅the answer了解更多详情。
顺便说一下,我发布了the suggestion(请参阅the src-file),这将允许自动检测输入JSON格式的不同变化。我希望这个建议能被三位一体所接受,并且我们会看到关于阅读JSON数据的问题更少的问题。
谢谢你的回答。我试过[链接] http://*.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"
},
那么你有正确的答案在这里:[jqGrid不显示JSON数据](http://*.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