[英]jqGrid JSON Data Can't Shown On Table
I want to show a JSON data at my table as like here: example 我想在我的桌子上显示一个JSON数据,如下所示: example
I used that CSS imports: 我使用CSS导入:
<link rel="stylesheet" href="/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="/css/ui.multiselect.css"/>
<link rel="stylesheet" href="/css/jquery-ui-1.8.1.custom.css"/>
That JS imports: JS导入:
<script type=text/javascript src="/js/jquery.js"></script>
<script type=text/javascript src="/js/jquery_ui_1.8.1.js"></script>
<script type=text/javascript src="/js/jquery.layout.js"></script>
<script type=text/javascript src="/js/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="/js/ui.multiselect.js"></script>
<script type=text/javascript src="/js/jgrid_4.1.js"></script>
<script type="text/javascript" src="/js/jquery.tablednd.js"></script>
<script type="text/javascript" src="/js/jquery.contextmenu.js"></script>
(Some files has different name but they are OK) (有些文件有不同的名称,但它们没问题)
I am getting a JSON data from an URL and when I check it it comes correctly at Firebug. 我从URL获取JSON数据,当我检查它时,它在Firebug中正确显示。 That's my HTML data:
这是我的HTML数据:
<table id="confTable"></table>
<div id="pconfTable"></div>
That's my script to populate data: 这是我填充数据的脚本:
jQuery("#confTable").jqGrid({ ajaxGridOptions : {type:"GET"}, serializeGridData : function(postdata) {
postdata.page = 1;
return postdata;
}, url:'/ui/webapp/conf', datatype: 'json', colNames:['Value','Type', 'Target Module', 'Configuration Group', 'Name', 'Description', 'Identity', 'Version', 'System Id', 'Active'],
colModel:[
{name:'value',index:'value', width:55},
{name:'type',index:'type', width:55},
{name:'targetModule',index:'targetModule', width:150},
{name:'configurationGroup',index:'configurationGroup', width:180},
{name:'name',index:'name asc', width:90},
{name:'description',index:'description', width:90},
{name:'identity',index:'identity', width:90},
{name:'version',index:'version', width:90},
{name:'systemId',index:'systemId', width:100},
{name:'active',index:'active', width:100}
], rowNum:10, width:980, rowList:[10,20,30], pager: '#pconfTable', sortname: 'name', viewrecords: true, sortorder: "desc", caption:"Configuration Information" });
jQuery("#pconfTable").jqGrid('navGrid', '#pconfTable', {edit:false,add:false,del:false});
That's JSON data that I get: 这是我得到的JSON数据:
[{
"value":"10",
"type":"Tip 1",
"targetModule":"Target 1",
"configurationGroup":null,
"name":"Configuration Deneme 1",
"description":null,
"identity":"Configuration Deneme 1",
"version":0,
"systemId":0,
"active":true
},
{
"value":"50",
"type":"Tip 2",
"targetModule":"Target 2",
"configurationGroup":null,
"name":"Configuration Deneme 2",
"description":null,
"identity":"Configuration Deneme 2",
"version":0,
"systemId":0,
"active":true
},
{
"value":"100",
"type":"Tip 3",
"targetModule":"Target 3",
"configurationGroup":null,
"name":"Configuration Deneme 3",
"description":null,
"identity":"Configuration Deneme 3",
"version":0,
"systemId":0,
"active":true
}
]
I have formatted indentation to be read easiliy. 我已经格式化缩进阅读easiliy。
However I don't get any error from Firebug and don't have any can't imported files I still have an empty table. 但是,我没有从Firebug得到任何错误,并且没有任何无法导入的文件我仍然有一个空表。
Any ideas? 有任何想法吗?
PS: Is there anything wrong with my JSON data, should I send a data starts as like => total: xxx, page: yyy, records: zzz, rows: or not a must? PS:我的JSON数据有什么问题,我应该发送数据像=> total:xxx,page:yyy,records:zzz,rows:或者不是必须的?
To see the grid filled you should use the following jsonReader as additional jqGrid parameter 要查看填充的网格,您应该使用以下jsonReader作为附加的jqGrid参数
jsonReader: {
repeatitems: false,
id: "value",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
I suppose, that the values from the 'value'
column are unique, so I used id: "value"
in the jsonReader
above. 我想,
'value'
列中'value'
是唯一的,所以我在上面的jsonReader
使用了id: "value"
。
By the way the ajaxGridOptions : {type:"GET"}
do nothing. 顺便说一句,
ajaxGridOptions : {type:"GET"}
什么都不做。 The default mtype: 'GET'
do the same. 默认的
mtype: 'GET'
也是如此。 In the call of navGrid
method you should use jQuery("#confTable")
instead of jQuery("#pconfTable")
. 在调用
navGrid
方法时,你应该使用jQuery("#confTable")
而不是jQuery("#pconfTable")
。
After the described changed you will have the following demo . 在描述更改后,您将获得以下演示 。 In the demo I added
height: 'auto'
to have less empty space in the grid. 在演示中我添加了
height: 'auto'
以减少网格中的空白空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.