free-jqGrid - 显示数值而不是select cell

时间：2016-05-29 16:59:02

标签： jquery jqgrid free-jqgrid

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

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

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

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

enter image description here enter image description here 

 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

 });

1 个答案:

答案 0 :(得分：3)

您使用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" 1}}定义为

formatter:'select'

唯一的问题是：您还希望从服务器加载数据 。数据将使用editoptions.value填充到网格中。因此，在格式化程序开始工作之前，必须设置/修改列adresa的值beforeProcessing。

我建议您使用editoptions.value回调，处理服务器响应并设置/修改列adresa的{​​{1}}。例如，您可以使用setColProp来设置editoptions.value。有关更多实施详情，请参阅the answer和this one。

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

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

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

相关问题
最新问题