jqgrid 从 rest 服务中检索 JSON 数据但不显示它

Question

网格显示并从其余服务中检索数据但未显示。我很确定我只是遗漏了一些愚蠢的东西，但我已经检查了文档和这里的其他一些答案，但没有任何解决办法。我可以在调试器中看到数据正在传输（这是我从中提取样本的地方）并且页面上没有 JavaScript 错误。我也检查了数据，它是有效的 JSON。我 missing/doing 哪里错了？

代码：

<table id="custSearch">
    <tr><td></td></tr>
</table>
<div id="custSearchPager"></div>

$("#custSearch").jqGrid({
 url : '/rebate/rest/customer/getCustomers',
 datatype : 'json',
 mtype : 'GET',
 colNames : ['customerID', 'Company', 'First Name', 'Last Name','Address', 'City', 'State', 'Zip Code', 'Phone', 'Fax', 'EMail'],
 colModel : [ 
  { name:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
  { name:'Company', index:'company', width:150, sortable:true},
  { name: 'First Name', index: 'firstName', length: 50, search: false}, 
  { name: 'Last Name', index: 'lastName', width: 80}, 
  { name: 'Address', index: 'address', width: 100, search: false}, 
  { name: 'City', index: 'city', width: 40, search: false}, 
  { name: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} }, 
  { name: 'Zip', index: 'zip', width: 80}, 
  { name: 'Phone', index: 'phone', width: 80}, 
  { name: 'Fax', index: 'fax', width: 80, search: false}, 
  { name: 'EMail', index: 'email', width: 80}
 ],
 rowNum: 20,
 rowList:[10,20,30],
 pager : '#custSearchPager',
 sortname : 'company',
 sortorder : 'desc',
 viewrecords: true,
 gridview: true,
 caption : 'Customers',
 height: '300',
 jsonReader: {cell:"", id:"customerID"}
});            

jQuery("#custSearch").jqGrid('navGrid','#custSearchPager',{edit:false,add:false,del:false,search:true});

数据：

{"page":"1","total":"30","records":"20","rows":[
    {"customerID":144,"firstName":"Keefe","lastName":"Abbott","company":"Vulputate LLC","address":"P.O. Box 688, 4718 Urna Street","country":"USA","city":"Detroit","state":"MI","zip":"61733","phone":"(411) 256-3885","fax":"(712) 531-0718","email":"Etiam@Integereu.org"},
    {"customerID":91,"firstName":"Jerome","lastName":"Allison","company":"Vulputate Inc.","address":"Ap #519-7407 Orci Road","country":"USA","city":"Kansas City","state":"MO","zip":"22551","phone":"(245) 214-4028","fax":"(202) 531-5933","email":"sed.dolor.Fusce@risusDonec.ca"},
    {"customerID":293,"firstName":"Hyacinth","lastName":"Fuentes","company":"Vulputate Corporation","address":"Ap #899-7402 Donec Road","country":"USA","city":"Jackson","state":"MS","zip":"27829","phone":"(342) 945-6263","fax":"(260) 216-3339","email":"felis.Donec.tempor@sitamet.org"},
    {"customerID":235,"firstName":"Charde","lastName":"England","company":"Vulputate Associates","address":"2803 Odio Street","country":"USA","city":"Racine","state":"WI","zip":"17971","phone":"(421) 324-5019","fax":"(559) 946-7839","email":"pretium@eu.org"}
. . .
]}

Answer 1

colModel 中的名称不能包含 space。我认为您在 colModel 中混合了名称和标签属性以显示 table.

的 headers

您的代码中的错误是名称属性与响应中的数据不匹配，其次您的名称属性包含 space，这是不允许的。为此，您的 colModel 应该是：

colModel : [ 
    { name:'customerID', label:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
    { name:'company', label:'Company', index:'company', width:150, sortable:true},
    { name: 'firstName', label: 'First Name', index: 'firstName', length: 50, search: false},   
    { name:'lastName', label: 'Last Name', index: 'lastName', width: 80}, 
    { name: 'address', label: 'Address', index: 'address', width: 100, search: false}, 
    { name: 'city', label: 'City', index: 'city', width: 40, search: false}, 
    { name:'state', label: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} }, 
    { name:'zip', label: 'Zip', index: 'zip', width: 80}, 
    { name:'phone', label: 'Phone', index: 'phone', width: 80}, 
    { name: 'fax', label: 'Fax', index: 'fax', width: 80, search: false}, 
    { name: 'email', label: 'EMail', index: 'email', width: 80}
],

jqgrid 从 rest 服务中检索 JSON 数据但不显示它

jqgrid retrieves JSON data from rest service but does not display it

javascript

jquery

json

jsp

jqgrid