的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'以減少網格中的空白空間。