我正在使用免费的jqgrid版本4.13.2，我有一个网格，其中包含2个选择列和一个自定义列，每个单元格具有多个复选框。
选择列之一具有硬编码的值，并且可以完美地工作。另一个基于另一个网格行动态创建选择字符串，据我所知，它与工作选择没有什么不同。
当我处于编辑状态时，它们会正确显示，但是在保存行后，动态填充的select将显示数值，复选框列也会显示数值。
我的问题是，生成的选择字符串有问题吗？我该怎么做才能使他们工作？
function getSpecificCell(grid, col){
var id = grid.find('tr[aria-selected="true"]').attr('id');
return grid.jqGrid('getRowData',id)[col];
}
function getAdresseSelectValues(){
var adrese = $("#adreseGrid").getGridParam('data'),
adreseDeReturnat="";
for(var i=0;i<adrese.length;i++){
adreseDeReturnat += adrese[i].adresseId + ":Str. " + adrese[i].streetId +" Nr. " + adrese[i].streetNumber;
if(adrese[i].building){
adreseDeReturnat += "Bl. " + adrese[i].building;
}
if(adrese[i].floor){
adreseDeReturnat += " Etaj "+ adrese[i].floor;
}
if(adrese[i].apartament){
adreseDeReturnat += " Ap. " + adrese[i].apartament;
}
if(adrese[i].interPhone){
adreseDeReturnat += " Interfon: " + adrese[i].interPhone;
}
adreseDeReturnat += ";";
}
adreseDeReturnat = adreseDeReturnat.substring(0,adreseDeReturnat.length-1);
return adreseDeReturnat;
}
var custOrdGrid = $("#customersOrdersGrid"),
custOrdPager = "#customersOrdersPager",
restURL = "/LicentaREST/rest/",
validationCount={},
getOrderDDLs = {};
getOrderDDLs = ajaxCall(restURL+"ddl/getOrderDDL");
var pizzaValues = getOrderDDLs.pizzaValues,
pasteValues = getOrderDDLs.hamburgerValues,
hamburgerValues = getOrderDDLs.pasteValues,
drinksValues = getOrderDDLs.drinksValues,
desertValues = getOrderDDLs.desertValues;
custOrdGrid.jqGrid({
datatype: "local",
mtype: "POST",
url: restURL + "orders/getCustomerOrders",
editurl: restURL +"orders/createUpdateOrder",
colModel: [
{ name: "orderId", index:"orderId",label:"",key:true,hidden:true},
{ name: "custId", index:"custId",label:"",hidden:true},
{ name: 'createdBy', index: 'createdBy', label:'Creat de', width: 90,editable: false,hidden:true },
{ name: 'orderedBy', index: 'orderedBy',search:false, label:'Client', width: 50, editable: false},
{ name: 'phoneNumber', index: 'phoneNumber',label:'Telefon',editable: false,width: 50},
{ name: 'pizza', index: 'pizza',editable: true,search:false,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:pizzaValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Pizza', width: 86 },
{ name: 'paste', index: 'paste',editable: true,search:false,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:pasteValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Paste', width: 80 },
{ name: 'hamburger', index: 'hamburger',editable: true,search:false,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:hamburgerValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Hamburger', width: 80 },
{ name: 'drinks', index: 'drinks',search:false,editable: true,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:drinksValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Bauturi', width: 80 },
{ name: 'desert', index: 'desert',search:false,editable: true,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
if(validationCount.Pizza === false && validationCount.Paste === false && validationCount.Hamburger === false && validationCount.Bauturi === false && validationCount.Desert === false ){
return [false,'Cel putin un produs trebuie selectat'];
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:desertValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Desert', width: 80 },
{ name: 'notes', index: 'notes',label:'Nota',edittype:'textarea', editoptions: { rows: "12", cols: "20"}, width: 80,editable: true},
{ name: 'total', index: 'total',label:'Total', width: 40,editable: false,align:'center' },
{ name: 'orderedAt', index:'orderedAt', label:'Data', width: 80,formatter: 'date', formatoptions: {newformat:"d/m/Y"},search:false},
{ name: 'adresa', index:'adresa',label:'Adresa',formatter:'select',stype:'select',searchoptions: {sopt: ['eq','ne'],value: getAdresseSelectValues()},editable:true,edittype:'select',editoptions:{value: getAdresseSelectValues}},
{ name: 'orderStatus', index: 'orderStatus', label:'Status',stype:'select',edittype:'select', editoptions:{value:"1:Comanda Primita;2:Comanda in livrare;3:Comanda anulata de client;4:Comanda refuzata de client;5:Comanda Finalizata"},formatter:'select', width: 90,editable: true}
],
pager: custOrdPager,
rowNum: 10,
beforeProcessing: function(data){
if(data && data.length>0){
var test = getAdresseSelectValues();
console.log(test);
for(var i=0;i<data.length;i++){
data[i].orderedAt = new Date(data[i].orderedAt);
data[i].total += " lei";
}
}
console.log(getAdresseSelectValues());
},
ajaxGridOptions: {contentType: 'application/json; charset=utf-8'},
serializeGridData: function (postData) {
postData = parseInt($("#customersGrid").find('tr[aria-selected="true"]').attr('id'));
return JSON.stringify(postData);
},
rowList: [10, 50, 100, 250,500],
sortname: 'id',
loadonce: true,
rownumbers: true,
forceClientSorting: true,
inlineEditing: {
ajaxSaveOptions: { contentType: "application/json" },
serializeSaveData: function (postData) {
if(postData.oper == "add"){
postData.createdBy = $("#userIdSession").val();
postData.custId = $("#customersGrid").find("tr[aria-selected='true']").attr("id");
postData.createdAt = new Date();
}
if(postData.oper == "edit"){
var data =custOrdGrid.getRowData(postData.orderId);
postData.createdBy = data.createdBy;
postData.custId = data.custId;
}
postData.adresa=parseInt(postData.adresa.replace('"',""),10);
postData.total = parseInt(custOrdGrid.jqGrid("getCell",postData.orderId,"total"),10);
return JSON.stringify(postData);
}
},
height: 220,
iconSet: "fontAwesome",
sortorder: 'desc',
viewrecords: true,
caption: 'Customer Orders',
autowidth: true
});
最佳答案
您使用datatype: "local"，但是使用mtype: "POST"，url: restURL + "orders/getCustomerOrders"和beforeProcessing选项/回调，这表明您确实从服务器加载了数据。列adresa具有以下属性
{
name: 'adresa', index:'adresa',label:'Adresa',
formatter:'select',
stype:'select',searchoptions: {sopt: ['eq','ne'],value: getAdresseSelectValues()},
editable:true,edittype:'select',editoptions:{value: getAdresseSelectValues()}
}
与
formatter:'select'。这意味着从服务器返回的adresa列的数据在第一张图片上是26和27之类的数字，并且由于定义为Str. sadasdsd Nr. 34Bl. asdas Etaj asda Ap. asda的用法，您希望在其中以文本Str. asdasdada Nr. 123Bl. 123 Etaj 123 Ap. 123和editoptions.value的形式显示"26:Str. sadasdsd Nr. 34Bl. asdas Etaj asda Ap. asda;27:Str. asdasdada Nr. 123Bl. 123 Etaj 123 Ap. 123"
唯一的问题是：您也想从服务器加载数据。数据将使用
formatter:'select'填充到网格中。因此，在格式化程序开始工作之前，必须设置/修改列editoptions.value的值adresa。我建议您使用
beforeProcessing回调，在其中处理服务器响应并设置/修改列editoptions.value的adresa。例如，可以使用setColProp设置editoptions.value。有关更多实施细节，请参见the answer和this one。我建议您另外使用列模板（请参见the old answer），以减少代码中的代码重复。它将简化以后的代码修改/维护。
一些其他建议：您将隐藏列
name: "orderId"与key:true属性一起使用。该值将保存在列的<td>中，并保存为行（id）的<tr>属性的值。我建议您删除该列并改为使用jsonReader: { id: "orderId" }（如果不是从服务器加载数据，则使用localReader: {id: "orderId"}）。它将通知jqGrid根据输入数据的orderId属性值分配行ID。另外，jqGrid将在编辑过程中使用orderId作为rowid的名称（设置为editurl），而不是默认名称id。您也可以考虑删除其他隐藏列（
custId和createdBy）。您只需要添加选项additionalProperties: ["orderId", "custId", "createdBy"]即可通知jqGrid从输入数据中读取属性。这些属性将在自定义格式化程序rowattr，cellattr中显示，并保存在本地data中（可通过getLocalRow方法访问）。换句话说，数据将保存在JavaScript对象中，而不是DOM中。它使HTML / DOM更加整洁并提高了页面性能。