free-jqGrid - 显示数值而不是选择单元格的文本

Question

我使用的是免费的 jqgrid 4.13.2 版，我有一个带有 2 个选择列的网格和一个自定义列，每个单元格有多个复选框。

其中一个选择列具有硬编码的值，并且可以完美运行。另一个基于另一个网格行动态创建选择字符串，据我所知，它与工作选择没有什么不同。

当我在编辑时，它们会正确显示，但在保存行后，动态填充的选择会显示数值，复选框列也是如此。

我的问题是，生成的选择字符串有问题吗？我该怎么做才能让他们工作？

 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

 });

Answer 1

您使用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' 填充到网格中。因此，adresa 列的值 editoptions.value 必须在格式化程序开始工作之前设置/修改。

我建议您使用beforeProcessing 回调，您可以在其中处理服务器响应并设置/修改editoptions.value 列adresa。例如，您可以使用setColProp 来设置editoptions.value。请参阅the answer 和this one 了解更多实施细节。

我建议您另外使用列模板（请参阅the old answer）以减少代码中的代码重复。它将简化您以后代码的修改/维护。

一些额外的建议：你使用 hidden 列 name: "orderId" 和 key:true 属性。该值将保存在列和的<td>中，作为行的id属性值（<tr>）。我建议您删除该列并改用jsonReader: { id: "orderId" }（或localReader: {id: "orderId"}，如果您不是从服务器加载数据）。它将通知 jqGrid 根据输入数据的orderId 属性的值分配rowid。此外，jqGrid 将在编辑期间使用orderId 作为rowid 的名称（设置为editurl）而不是默认名称id。

您也可以考虑删除其他隐藏列（custId 和 createdBy）。您只需添加选项additionalProperties: ["orderId", "custId", "createdBy"] 即可通知jqGrid 从输入数据中读取properties。这些属性将在自定义格式化程序rowattr、cellattr 中看到并保存在本地data（可通过getLocalRow 方法访问）。换句话说，数据将保存在 JavaScript 对象中，而不是 DOM 中。它使 HTML/DOM 更干净，并提高了页面的性能。