的jqGrid JSON数据不能显示在表

Question

我想在我的表像这里显示JSON数据：example

我使用的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"/> 

那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> 

（有些文件有不同的名字，但他们都OK）

我正在从一个JSON数据URL，当我检查它时，它正确地在Firebug。 这是我的HTML数据：

<table id="confTable"></table> 
<div id="pconfTable"></div> 

这是我的脚本来填充数据：

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}); 

这是我得到的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 
    } 
] 

我已经格式化的缩进被easiliy阅读。

但是，我没有从Firebug得到任何错误，没有任何不能导入的文件，我仍然有一个空表。

任何想法？

PS：有什么毛病我JSON数据，我应该发送一个数据开始像=>总：XXX，页：YYY，记录：ZZZ，行：或不是必须的？

Answer 1

要查看网格填充你应该使用下列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; } 
} 

我想，从'value'列中的值是唯一的，所以我在上面的jsonReader使用id: "value"。

顺便说一句ajaxGridOptions : {type:"GET"}什么都不做。默认mtype: 'GET'也是这样做的。在拨打navGrid方法时，您应该使用jQuery("#confTable")而不是jQuery("#pconfTable")。

描述改变后，您将有以下demo。在演示中，我添加了height: 'auto'以减少网格中的空白空间。