EasyUI Editor ComboBox 本地赋值 动态编辑

1.先定义编辑方式

性别
名字
年龄

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



你可能感兴趣的:(Easyui)