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