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