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

Question

网格显示和检索来自 REST 服务的数据，但不显示。我很确定我只是错过了一些愚蠢的东西，但我已经检查了文档和其他一些答案，但没有任何东西可以解决它。我可以在调试器中看到数据正在遇到（这是我从中提取样本的地方）并且页面上没有 JavaScript 错误。我还检查了数据，它是有效的 JSON。我错过了什么/做错了什么？

代码：

<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 中的名称不能包含空格。我认为您在 colModel 中混合了 name 和 label 属性来显示表的标题。

您的代码中的错误是 name 属性与响应中的数据不匹配，其次您的 name 属性包含空格，这是不允许的。为此，您的 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}
],