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