Я пытаюсь манипулировать данными, полученными с сервера, в событии loadComplete:
loadComplete:function(data){
alert("load completed");
$.each (data,function(index,item){
item["customerSite"]=item.header.customerName + ' / '+item.header.siteDescription;
});
}
Новое добавленное поле предназначено для использования в качестве столбца, который нужно сгруппировать. Однако я продолжаю получать этот столбец какнеопределен как заголовок группировки.Я попытался добавить еще одно поле к объекту JSON в качестве обычного столбца, который в итоге оказался пустым.Во время отладки я заметил, что сетка построена до того, как остановится моя точка останова в loadComplete.
Насколько я понимаю, событие loadComplete состоит в том, что оно сработает, как только вызов ajax вернется успешно.После того, как я добавил в свой код событие gridComplete, я заметил, что gridComplete вызывается до вызова loadComplete.
gridComplete: function(){
alert("grid completed");
}
Что я делаю не так?Я использую
jsonReader: {
repeatitems: false,
id: "id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
для обработки возвращенной строки JSON, но не могу представить, что это может быть проблемой.Пожалуйста, помогите!
Основываясь на комментариях Олега, я буду использовать пользовательский форматтер.Однако результат составителя не работает для заголовка группы, для которого предназначен этот столбец.Если я установлю groupColumnShow: [true], все данные столбца будут правильными, но все равно оставляет заголовок группы «неопределенным»
После определения сетки:
buildGrid:function(){
var myGrid = jQuery("#serverList");
myGrid.jqGrid({
datatype: "json",
url: "http://localhost:8080/cm.server/api/v1/agent/config.json?",
jsonReader: {
repeatitems: false,
id: "id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
colNames:['Customer/Site','Customer','Site','Server ID', 'Server Name', ,'id'],
colModel :[
{name:'customerSite',editable:false, formatter:that.buildCustmerSite},
{name:'header.customerName',hidden:true,editable:true,editrules:{edithidden:true},editoptions:{readonly:true,size:25},formoptions:{ rowpos:1,elmprefix:" "}},
{name:'header.siteDescription', hidden:true, editable:true,editrules:{edithidden:true},editoptions:{readonly:true,size:25},formoptions:{ rowpos:2,elmprefix:" "}},
{name:'header.serverID', index:'header.serverID', width:200, align:'right',editable:true,editoptions:{readonly:true,size:25},formoptions:{ rowpos:3,elmprefix:" "}},
{name:'header.serverName', index:'header.serverName', width:150, align:'right',editable:true,editoptions:{readonly:true,size:25},formoptions:{ rowpos:4,elmprefix:" "}},
{name:'id', hidden:true},
],
height: '500',
width: '100%',
rowNum:20,
autowidth: true,
pager: '#pager',
sortname: 'serverID',
sortorder: "desc",
viewrecords: true,
caption: 'Server Configurations',
editurl:"/cm.server/api/v1/agent/config-grid",
autoencode:true,
ignoreCase:true,
grouping:true,
groupingView:{
groupField:['customerSite'],
groupColumnShow : [false]
}
});
jQuery("#serverList").jqGrid('navGrid','#pager',
{edit:true,add:false,del:false,search:true},
{height:450,reloadAfterSubmit:true, recreateForm:true,jqModal:true, closeOnEscape:true, closeAfterEdit:true, bottominfo:"Fields marked with (*) are required"}, // edit options
{} // search options
);
jQuery("#serverList").jqGrid('filterToolbar');
return true;
}
, а послеПользовательский форматер:
buildCustmerSite:function(cellvalue,options,rowObject){
var customerSite =rowObject.header['customerName'] + '/'+ rowObject.header["siteDescription"];
return customerSite;
}