free-jqGrid - 显示数值而不是 select 单元格的文本
free-jqGrid - The numeric value is displayed instead of the text for select cell
我正在使用免费的 jqgrid 版本 4.13.2，我有一个包含 2 select 列的网格和一个每个单元格包含多个复选框的自定义列。
其中一个 select 列的值是硬编码的，它工作得很好。另一个基于另一个网格行动态创建 select 字符串，据我所知，它与工作 select.
没有什么不同
当我在编辑时，它们显示正确，但在保存行后，动态填充的 select 显示数值，复选框列也是如此。
我的问题是，生成的 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"和beforeProcessingoptions/callbacks，这说明你是从服务器加载数据的。 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 列 return 的数据是第一张图片上的数字，例如 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' 填充在网格中。因此，列 adresa 的值 editoptions.value 必须是 set/modified 在 格式化程序开始工作之前。
我建议您使用 beforeProcessing 回调，在其中处理服务器响应和列 adresa 的 set/modify editoptions.value。例如，您可以使用 setColProp 来设置 editoptions.value。有关更多实施细节，请参阅 the answer and this one。
我建议您另外使用列模板（请参阅 the old answer）以减少代码中的代码重复。它将在以后 modification/maintain 简化您的代码。
一些额外的建议：您使用 隐藏 列 name: "orderId" 和 key:true 属性。该值将保存在 列的 <td> 和 中作为行 (<tr>) 的 id 属性的值。我建议您删除该列并改用 jsonReader: { id: "orderId" }（如果您不是从服务器加载数据，则使用 localReader: {id: "orderId"}）。它将通知 jqGrid 根据输入数据的 orderId 属性 的值分配 rowids。此外，jqGrid 将在编辑期间使用 orderId 作为 rowid 的名称（设置为 editurl），而不是默认名称 id.
您也可以考虑删除其他隐藏列（custId 和 createdBy）。您只需要添加选项 additionalProperties: ["orderId", "custId", "createdBy"] 来通知 jqGrid 从输入数据中读取 properties。这些属性将在自定义格式化程序 rowattr、cellattr 中看到，并保存在本地 data 中（可通过 getLocalRow 方法访问）。换句话说，数据将保存在 JavaScript 对象中，而不是在 DOM 中。它使 HTML/DOM 更干净并提高了页面性能。
我正在使用免费的 jqgrid 版本 4.13.2，我有一个包含 2 select 列的网格和一个每个单元格包含多个复选框的自定义列。
其中一个 select 列的值是硬编码的，它工作得很好。另一个基于另一个网格行动态创建 select 字符串，据我所知，它与工作 select.
没有什么不同当我在编辑时，它们显示正确，但在保存行后，动态填充的 select 显示数值，复选框列也是如此。
我的问题是，生成的 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"和beforeProcessingoptions/callbacks，这说明你是从服务器加载数据的。 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 列 return 的数据是第一张图片上的数字，例如 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' 填充在网格中。因此，列 adresa 的值 editoptions.value 必须是 set/modified 在 格式化程序开始工作之前。
我建议您使用 beforeProcessing 回调，在其中处理服务器响应和列 adresa 的 set/modify editoptions.value。例如，您可以使用 setColProp 来设置 editoptions.value。有关更多实施细节，请参阅 the answer and this one。
我建议您另外使用列模板（请参阅 the old answer）以减少代码中的代码重复。它将在以后 modification/maintain 简化您的代码。
一些额外的建议：您使用 隐藏 列 name: "orderId" 和 key:true 属性。该值将保存在 列的 <td> 和 中作为行 (<tr>) 的 id 属性的值。我建议您删除该列并改用 jsonReader: { id: "orderId" }（如果您不是从服务器加载数据，则使用 localReader: {id: "orderId"}）。它将通知 jqGrid 根据输入数据的 orderId 属性 的值分配 rowids。此外，jqGrid 将在编辑期间使用 orderId 作为 rowid 的名称（设置为 editurl），而不是默认名称 id.
您也可以考虑删除其他隐藏列（custId 和 createdBy）。您只需要添加选项 additionalProperties: ["orderId", "custId", "createdBy"] 来通知 jqGrid 从输入数据中读取 properties。这些属性将在自定义格式化程序 rowattr、cellattr 中看到，并保存在本地 data 中（可通过 getLocalRow 方法访问）。换句话说，数据将保存在 JavaScript 对象中，而不是在 DOM 中。它使 HTML/DOM 更干净并提高了页面性能。