EasyUI Editor ComboBox 本地赋值 动态编辑

1.先定义编辑方式

<th data-options="field:'sex',align:'center',width:100,editor:'combobox'">性别</th>
<th data-options="field:'name',align:'center',width:100,editor:'text'">名字</th>
<th data-options="field:'age',align:'center',width:100,editor:'text'">年龄</th>

2.加载方法

$('#tbl_retension').datagrid({
		onAfterEdit: function (rowIndex, rowData, changes) { //编辑模式结束执行
			//可执行修改操作也可加入数组 或作记录
	        editRow = undefined;  
	    }, 
	    onDblClickCell: function (rowIndex, field, value) {  //双击单元格执行--进入编辑模式
	        if (editRow != undefined) {  
	            $("#tbl_retension").datagrid('endEdit', editRow);  
	        }
	        if (editRow == undefined) {
	        	setFieldEdit(rowIndex,field);//只给被点击的列给修改属性
	        	if(field=='sex')
	        		setComboBoxS(rowIndex,field,value,data);//给ComboBox赋值
	        	else
	        		$("#tbl_retension").datagrid('beginEdit', rowIndex);
	            editRow = rowIndex;
	        }  
	    },
	    onClickCell:function (rowIndex, field, value){//单击单元格执行--退出编辑模式
	    	if (editRow != undefined) {  
	            $("#tbl_retension").datagrid('endEdit', editRow);
	            
	        }
	    }
	}); 

3.给ComboBox赋值,也可以用于其他编辑方式

function setComboBoxS(rowIndex,field,value,data){//rowIndex行号 field列名 value列值 data数组
	 $("#tbl_retension").datagrid('beginEdit', rowIndex);
     var smEditor =  $("#tbl_retension").datagrid('getEditor', {index:rowIndex,field:field});
		$(smEditor.target).combobox({
			valueField:'key',  
	      	textField:'value',
	        onShowPanel: function(){
	        	$(smEditor.target).combobox("loadData", data);                   
	        },
	        onSelect:function (record) {  
	         	//你需要联动的操作或者其他
	        }
	     });
		$(smEditor.target).combobox('select', value);
}

4.只对被点击的单元格进行编辑

function setFieldEdit(rowIndex,field){
    var fields =$("#tbl_retension").datagrid('getColumnFields', true).concat($("#tbl_retension").datagrid('getColumnFields'));
    for (var i = 0; i < fields.length; i++) {  
        var col = $("#tbl_retension").datagrid('getColumnOption', fields[i]); //获取列属性
        col.editor1 = col.editor; //将该行所有列的编辑属性复制到新容器中--也可以在此动态设置编辑属性
        if (fields[i] != field) {  
            col.editor = null;//清除掉不是被点击单元格的编辑属性  
        }
    }  
    $("#tbl_retension").datagrid('beginEdit', rowIndex);  
    for (var i = 0; i < fields.length; i++) {  
        var col = $("#tbl_retension").datagrid('getColumnOption', fields[i]);//获取列属性  
        col.editor = col.editor1;//恢复该行没有被点击的单元格的编辑属性
    }
}

5.data本地数组

 var data=[]; data.push({'key':'','value':'请选择'},  {'key':'1','value':'男'}, {'key':'2','value':'女'});



  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值