jqGrid下拉列表在编辑表单上的值错误

时间:2019-06-27 21:11:50

标签: javascript jquery jqgrid

打开表单时,我的编辑表单上的三个下拉菜单之一设置不正确。表格上的其他两个下拉菜单均已正确设置。正在从服务器以<select><option value='#'>blah</option></select>.

的形式返回下拉数据

classDesc,purchClass和company是使用编辑表单上的下拉列表的三个字段。所有这些都正确显示在网格上,但是在编辑表单公司上始终显示第一个选项。从服务器返回的下拉数据中存在网格列中显示的值,但未选择该值。 (请参见屏幕截图)我尝试在afterShowForm中强制使用该值,但这没有效果。 jqGrid 4.6.0

这是我的专栏模型:

colModel : [ 
    { name:'id', index:'id', width:50, sortable:true, hidden: false, editable: true, align: 'right', editrules: {edithidden: false}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
    { name:'submittable', index:'submittable', width:42,sortable:false, align: 'center', search: false, cellattr: function () { return ' title="Submit this order"'; }},
    { name:'statusId', index:'statusId', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
    { name:'statusClassId', index:'statusClassId', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
    { name:'status', index:'status', width:100, sortable:true, hidden: false, editable:true, editoptions:{readonly:"true", defaultValue:"Open"}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
    { name:'dlcd', index:'dlcd', width:50, sortable:true, hidden: false, editable:true, editoptions:{readonly: true, defaultValue:"<%=userDatabean.getNumber()%>"}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
    { name:'classId', index:'classId', width:10, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
    { name:'classDesc', index:'classDesc', width:75, sortable:true, editable:true, edittype:'select', editoptions: {dataUrl:'/rebate/rest/lookup/v1/getClass'}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
    { name:'purchClassId', index:'purchClassId', width:10, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
    { name:'purchClass', index:'purchClass', width:70, sortable:true, editable:true, edittype:'select', editoptions: { dataUrl:'/rebate/rest/lookup/v1/getPurch'}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
    { name:'purchOther', index:'purchOther', width:150, sortable:false, hidden: true, editable:true, editrules: {edithidden: true}},
    { name:'custId', index:'custId', width:30, sortable:false, hidden: false, editable: true, editrules: {edithidden: false}},
    { name:'company', index:'company', width:175, sortable:true, editable:true, edittype:'select', editoptions: {dataUrl:'/rebate/rest/lookup/v1/getCustomer'}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
    { name:'poNum', index:'poNum', width:15, sortable:false, hidden: true, editable:true, editrules: {edithidden: true}},
    { name:'deliveryDate', index:'deliveryDate', width:80, sortable:true, hidden: false, editable:true, sorttype: "integer", 
        formatter: function (cellValue, options, rowdata, action) {
            var date = new Date(cellValue);
            var year = date.getFullYear();
            var month = date.getMonth() < 9
                        ? "0" + (date.getMonth()+1)
                        : (date.getMonth()+1);
            var day = date.getDate() <=9
                        ? "0" + date.getDate()
                        : date.getDate();
            return [year,month,day].join("-");
         },
        searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true},
        editoptions: {  maxlength: 12, dataInit: function(element){ $(element).datepicker({ dateFormat: "yy-mm-dd" }) } }, 
        editrules: { date: true, required: false }, editrules: {required:true}},
    { name:'dlrInfo', index:'dlrInfo', width:15, sortable:false, hidden: true, editable:true, editrules: {edithidden: true}, editoptions:{size:50, maxlength: 100}},
    { name:'file1', index: 'file1', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: true}},
    { name:'file2', index: 'file2', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: true}},
    { name:'terms', index:'terms', width:50, sortable:false, hidden: true, editable: true, edittype:'checkbox', editoptions: {value:"true:false"}, editrules: {edithidden: true},
        formoptions:{label: '<a href="javascript:showTerms()">Terms</a>'}       
    },
],

和带有编辑参数的navGrid:

    $("#orderGrid").jqGrid('navGrid', '#orderGridPager', {
    edit : true, 
    add : true, 
    del : false, 
    search : true

},{ //Edit form
    url : '/rebate/rest/header/v1/update',
    width: 600,
    viewPagerButtons: false,
    closeAfterEdit: true,
    recreateForm: true,
    modal: true,

    beforeShowForm: function ($form) {
        if($('#file1').val()=='') { //no file so add the file inputs
            $('#tr_file1').html('<td class="CaptionTD">Receipt 1</td><td class="DataTD">&nbsp;<input type="file" enctype="multipart/form-data" id="file1" name="file1" class="FormElement"></td>');
            $('#tr_file2').html('<td class="CaptionTD">Receipt 2</td><td class="DataTD">&nbsp;<input type="file" enctype="multipart/form-data" id="file2" name="file2" class="FormElement"></td>');

        } else { //we have a file so just show the file name
            $('#tr_file1').html('<td class="CaptionTD">Receipt 1</td><td class="CaptionTD">&nbsp;' + $('#file1').val() +'</td>');
            $('#tr_file2').html('<td class="CaptionTD">Receipt 2</td><td class="CaptionTD">&nbsp;' + $('#file2').val() +'</td>');
        }

        $form.find("#status,#dlcd,#id")
            .prop("readonly", true)
            .addClass("ui-state-disabled");

        if(!security[userLevel][$("#statusClassId").val()-1]) { 
            //make all fields read only.
            $form.find("input,select,button")
            .prop("disabled", true)
            .addClass("ui-state-disabled")
            .closest(".DataTD")
            .prev(".CaptionTD")
            .prop("disabled", true); 

            $form.parent().find('#sData').hide();   
        }
    },
    afterShowForm: function(formId) {
        $("#company").val($("#custId").val()).prop("select",true);

        console.log("after custId: " + $("#custId").val());
    },
    beforeSubmit: function(postdata, formid) {
        var chk = checkBeforeSubmit();
        if(!chk[0]) return chk;

        return [true, null, null];
    },
    serializeEditData: function (postdata) {
        return getFieldData("FrmGrid_orderGrid");
    },
    afterSubmit: function(response, postdata) {
        sendFormFiles(response.responseText);
        //console.log(response);
        $('#grid').trigger( 'reloadGrid' );
        return [true,null,null];
    },
    errorTextFormat: function(response) {
        return response.responseText=="" ?"400.1: An unknown error occured." : response.responseText;
    }

}

enter image description here

1 个答案:

答案 0 :(得分:0)

这原来是数据问题。

用于填充网格的查询仅拉入公司名称,用于构建下拉列表的查询的查询将其他几个字段串联到显示值中。我假设jqgrid将使用custId值在下拉列表中选择合适的元素,但它使用的是显示值。