easyUI datagrid 设置指定列为下拉可编辑

easyUI datagrid列表，存在如下情况，行数据编号与名称一一对应（例如供应商编码和供应商名称），编辑时，从下拉列表中选中供应商编号，自动填充本行的供应商名称

 

 

实现方式如下

页面js初始化下拉列表供应商信息，包括供应商编号和供应商名称，定义下拉变量supplierList，并且在datagrid中初始化完成

ajax从数据库中加载供应商信息

 

 

 查询的mapper指定返回值中供应商编码和供应商名称分别为SUPPLIERNO和SUPPLIERNAME(下拉显示需要用到这个名称)

 

 

 

 datagrid中供应商编码下拉供应商名称下拉js代码

以下代码较长，只需参考其中的供应商编码和供应商名称即可，需要为该列设置点击方法，编辑保存方法

/**
 * 初始化发动机EBOM列表
 */
function initEngineEBOMs(){
    // 需要初始化供应商下拉列表
    getSupplier();
    // 初始化设计师
    getDesigner();
    // 初始化sqe
    getSqe();
    // 初始化项目代号
    getProject();
    var dataGridObj = getDatagridObj();
    dataGridObj.url = TpmPage.contextPath + '/ppap/invoke?methodName=queryEngineEBOMInitList&pagination=true';
    dataGridObj.idField = 'ENGINE_EBOM_ID';
    dataGridObj.pageSize = 20;
    dataGridObj.sortName = 'ENGINE_EBOM_ID';
    dataGridObj.sortOrder = 'asc';
    dataGridObj.toolbar="#engine_ebom_tb";
    dataGridObj.nowrap = true;
    dataGridObj.singleSelect = false;
    dataGridObj.checkOnSelect = true;
    dataGridObj.columns = [[
        {
            field : 'ck',
            checkbox : true
        },{
            field : 'ENGINE_EBOM_ID',
            title : 'ENGINE_EBOM_ID',
            width : 80,
            align:'center',
            hidden : true
        },{
            field : 'ENGINE_TYPE',
            title : '机型',
            width : 100,
            align:'center'
        },{
            field : 'FUNCTION_MODULE',
            title : '功能模块',
            width : 200,
            sortable : true,
            align:'center'
        },{
            field : 'GROUP',
            title : '组',
            width : 100,
            hidden : true,
            align:'center'
        },{
            field : 'PART_CODE',
            title : '零件号',
            width : 150,
            align : 'center'
        },{
            field : 'PART_NAME',
            title : '零件名称',
            width : 150,
            align : 'center'
        },{
            field : 'PART_NAME_EN',
            title : '零件名称（英文）',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'VERSION',
            title :'版本',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'PART_NUM',
            title : '零件数量',
            width : 80,
            hidden : true,
            align : 'center'
        },{
            field : 'SUBSTITUTE_LIST',
            title : '替代件列表',
            width : 80,
            hidden : true,
            align : 'center'
        },{
            field : 'PUBLISH_DATE',
            title : '发布日期',
            width : 150,
            hidden : true,
            align : 'center'
        },{
            field : 'PART_PHASE',
            title : '零件阶段',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'PART_IMPORTANCE_LEVEL',
            title : '零件重要程度',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'PART_RESPONSIBLE_PERSON',
            title : '零件负责人',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'PART_USE_POSITION',
            title : '零件使用位置',
            width : 200,
            hidden : true,
            align : 'center'
        },{
            field : 'REFERENCE_TIGHTENING_TORQUE',
            title : '建议拧紧力矩',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'REMARK',
            title : '备注',
            width : 100,
            hidden : true,
            align : 'center'
        },{
            field : 'SQE_ACCOUNT',
            title : '主担账户',
            width : 100,
            align : 'center',
            hidden : true,
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'FULL_NAMEID',
                    textField : 'FULL_NAMEID',
                    data : sqeList,
                    readonly : false
                }
            }
        },{
            field : 'SQE_NAME',
            title : '主担',
            width : 100,
            align : 'center',
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'FULL_NAMEVALUE',
                    textField : 'FULL_NAMEVALUE',
                    data : sqeList,
                    readonly : false,
                    onSelect : function(data) {

                        var target = $('#engine_ebom_datagrid').datagrid(
                                'getEditor', {
                                    'index' : clickNum,
                                    'field' : 'SQE_NAME'
                                }).target;
                        var target1 = $('#engine_ebom_datagrid')
                                .datagrid('getEditor', {
                                    'index' : clickNum,
                                    'field' : 'SQE_ACCOUNT'
                                }).target;
                        var sqeName = data.FULL_NAMEVALUE;

                        for (var i = 0; i < sqeList.length; i++) {

                            if (sqeList[i].FULL_NAMEVALUE == sqeName) {
                                target1.combobox('setValue',
                                        sqeList[i].FULL_NAMEID)
                            }
                        }

                    },
                    editable : false
                }
            }
        },{
            field : 'PART_DESIGNER_ACCOUNT',
            title : '设计师账户',
            width : 100,
            align : 'center',
            hidden : true,
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'FULL_NAMEID',
                    textField : 'FULL_NAMEID',
                    data : designerList,
                    readonly : false
                }
            }
        },{
            field : 'PART_DESIGNER_NAME',
            title : '设计师',
            width : 100,
            align : 'center',
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'FULL_NAMEVALUE',
                    textField : 'FULL_NAMEVALUE',
                    data : designerList,
                    readonly : false,
                    onSelect : function(data) {

                        var target = $('#engine_ebom_datagrid').datagrid(
                                'getEditor', {
                                    'index' : clickNum,
                                    'field' : 'PART_DESIGNER_NAME'
                                }).target;
                        var target1 = $('#engine_ebom_datagrid')
                                .datagrid('getEditor', {
                                    'index' : clickNum,
                                    'field' : 'PART_DESIGNER_ACCOUNT'
                                }).target;
                        var designerName = data.FULL_NAMEVALUE;

                        for (var i = 0; i < designerList.length; i++) {

                            if (designerList[i].FULL_NAMEVALUE == designerName) {
                                target1.combobox('setValue',
                                        designerList[i].FULL_NAMEID)
                            }
                        }

                    },
                    editable : false
                }
            }
        },{
            field : 'ENGINE_PRJ_CODE',
            title : '项目代号',
            width : 100,
            align : 'center',
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'PROJECT_CODE',
                    textField : 'PROJECT_CODE',
                    data : prjList,
                    readonly : false,
                    editable : false
                }
            }
        },{
            field : 'SUPPLIER_NO',
            title : '供应商编号',
            width : 100,
            align : 'center',
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'SUPPLIERNO',
                    textField : 'SUPPLIERNO',
                    data : supplierList,
                    readonly : false,
                    onSelect : function(data) {
                        var target = $('#engine_ebom_datagrid').datagrid(
                                'getEditor', {
                                    'index' : clickNum,
                                    'field' : 'SUPPLIER_NO'
                                }).target;
                        var target1 = $('#engine_ebom_datagrid')
                                .datagrid('getEditor', {
                                    'index' : clickNum,
                                    'field' : 'SUPPLIER_NAME'
                                }).target;
                        var supplierno = data.SUPPLIERNO;
                        for (var i = 0; i < supplierList.length; i++) {
                            if (supplierList[i].SUPPLIERNO == supplierno) {
                                target1.combobox('setValue',
                                        supplierList[i].SUPPLIERNAME);
                            }
                        }
                    },
                    editable : false
                }
            }
        },{
            field : 'SUPPLIER_NAME',
            title : '供应商名称',
            width : 100,
            align : 'center',
            sortable : true,
            editor : {
                type : 'combobox',
                options : {
                    valueField : 'SUPPLIERNAME',
                    textField : 'SUPPLIERNAME',
                    data : supplierList,
                    readonly : false,
                    onSelect : function(data) {

                        var target = $('#engine_ebom_datagrid').datagrid(
                                'getEditor', {
                                    'index' : clickNum,
                                    'field' : 'SUPPLIER_NAME'
                                }).target;
                        var target1 = $('#engine_ebom_datagrid')
                                .datagrid('getEditor', {
                                    'index' : clickNum,
                                    'field' : 'SUPPLIER_NO'
                                }).target;
                        var supplier = data.SUPPLIERNAME;
                        for (var i = 0; i < supplierList.length; i++) {
                            if (supplierList[i].SUPPLIERNAME == supplier) {
                                target1.combobox('setValue',
                                        supplierList[i].SUPPLIERNO)
                            }
                        }
                    },
                    editable : false
                }
            }
        },{
            field : 'STATUS',
            title : '状态',
            width : 100,
            align : 'center'
        }
    ]];
    
    dataGridObj.onSelect = function(rowIndex, rowData) {
        clickNum = rowIndex;
    };
    
    // 使easyUI中的editor可用
    dataGridObj.onClickCell = editorUtils.onClickCell;
    //查询列表
    dataGridObj.remoteFilter = true;
    $('#engine_ebom_datagrid').datagrid(dataGridObj);
    $('#engine_ebom_datagrid').datagrid('enableFilter');
}