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');
}