EasyUI Editor ComboBox 本地赋值 动态编辑

本文介绍如何使用EasyUI框架中的数据表格组件实现单元格级别的编辑功能,包括定义编辑方式、加载方法、设置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':'女'});



### EasyUI Combobox 组件设置值的方法 在 EasyUI 中,可以通过 `combobox` 的 API 方法来实现为组件赋值的操作。以下是具体的说明和示例: #### 使用 `setValue` 方法 通过调用 `combobox('setValue', value)` 可以为指定的 ComboBox 设置值[^1]。 ```javascript $("#myComboBox").combobox('setValue', '目标值'); ``` 此方法仅设置了显示的值,而不会触发重新加载数据源的动作。如果需要同步更新底层的数据模型,则可以结合其他方法一起使用。 --- #### 同时设置值并刷新选项列表 当需要不仅设置当前选中的值,还希望确保该值存在于下拉框中时,可先加载对应的数据再执行设置动作[^2]。 ```javascript // 假设 eta 是已有的数据集 var eta = [ { id: 1, text: "选项一" }, { id: 2, text: "选项二" } ]; // 加载新数据到组合框 $('#myComboBox').combobox('loadData', eta); // 随后设定具体数值 $('#myComboBox').combobox('setValue', '选项一'); ``` 上述代码片段展示了如何手动定义一组 JSON 数据并通过 `loadData` 将其注入至控件内部;接着利用 `setValue` 来选定其中某一项作为初始状态呈现给用户查看[^3]。 --- #### 动态加载远程服务器端数据后再赋值 对于那些依赖于后台接口返回动态内容的情况,应该考虑采用 AJAX 请求获取最新资料之后才去完成初始化过程。 ```javascript $.ajax({ url: '/api/getOptions', type: 'GET', success: function(response){ $('#myComboBox').combobox({ data: response, valueField: 'id', textField: 'text' }); // 设定默认项 $('#myComboBox').combobox('setValue', response[0].id); } }); ``` 这里演示了一个完整的流程:从服务端取得最新的可用条目集合,并将其绑定到前端界面元件之上,最后挑选第一个记录成为预置选择项。 --- ### 注意事项 - 如果尝试设置的值不在现有的数据范围内,那么即使成功调用了 setValue 函数也不会有任何视觉上的改变发生。 - 当面对跨域资源读取场景下的特殊需求时,请记得调整 jQuery 版本以及相应插件配置以支持 JSONP 协议交互方式[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值