效果
代码
javascript
复制代码
$(function () {
// 标记当前正在编辑的行
var editorIndex = -1;
var data = [
{
code: 1,
name: '1',
price: 1,
status: 0
},
{
code: 2,
name: '2',
price: 2,
status: 1
}
]
$('#dg').datagrid({
data: data,
onDblClickCell:function (index, field, value) {
var dg = $(this);
if(field !== 'status' && editorIndex !== -1) {
dg.datagrid("endEdit",editorIndex)
return;
}else if(field === 'status' && editorIndex !== -1 && editorIndex !== index) {
dg.datagrid("endEdit",editorIndex)
return;
}
if(field === 'status' && editorIndex === -1) {
editorIndex = index;
dg.datagrid("beginEdit",index)
}
},
onSelect: function(index, row) {
var dg = $(this);
if(editorIndex !== index) {
dg.datagrid("endEdit",index)
}
},
onClickCell: function(index, field, value) {
var dg = $(this);
if(editorIndex !== -1 && field !== "status") {
dg.datagrid("endEdit",editorIndex)
} else if(field === 'status' && editorIndex !== -1 && editorIndex !== index) {
dg.datagrid("endEdit",editorIndex)
}
},
onEndEdit:function (index, row, changes) {
if(editorIndex === index) {
editorIndex = -1;
var dg = $(this);
dg.datagrid("updateRow",index,row)
}
},
columns:[[
{field:'code',title:'代码',width:100,align: 'center'},
{field:'name',title:'名称',width:100,align: 'center'},
{field:'price',title:'价格',width:100,align:'center'},
{field:'status',title:'状态',width:100,align:'center',formatter:function(value,row,index){
return value && (value === 1 || value === '1') ? "禁用" : "启用"
},
editor: {
type: 'combobox',
options: {
valueField: 'value',
textField: 'text',
data: [{value:1,text:'禁用'},{value:0,text:'启用'}]
}
}
}
]]
});
})
解析
列渲染为下拉框
javascript
复制代码
{field:'status',title:'状态',width:100,align:'center',formatter:function(value,row,index){
return value && (value === 1 || value === '1') ? "禁用" : "启用"
},
editor: {
type: 'combobox',
options: {
valueField: 'value',
textField: 'text',
data: [{value:1,text:'禁用'},{value:0,text:'启用'}]
}
}
}
双击触发编辑行
javascript
复制代码
onDblClickCell:function (index, field, value) {
var dg = $(this);
// 关闭其他行的行编辑
if(field !== 'status' && editorIndex !== -1) {
dg.datagrid("endEdit",editorIndex)
return;
}else if(field === 'status' && editorIndex !== -1
&& editorIndex !== index) {
dg.datagrid("endEdit",editorIndex)
return;
}
// 监听指定列,触发行编辑
if(field === 'status' && editorIndex === -1) {
editorIndex = index;
dg.datagrid("beginEdit",index)
}
},
监听关闭行编辑
javascript
复制代码
onSelect: function(index, row) {
var dg = $(this);
if(editorIndex !== index) {
dg.datagrid("endEdit",index)
}
},
onClickCell: function(index, field, value) {
var dg = $(this);
if(editorIndex !== -1 && field !== "status") {
dg.datagrid("endEdit",editorIndex)
} else if(field === 'status' && editorIndex !== -1
&& editorIndex !== index) {
dg.datagrid("endEdit",editorIndex)
}
},
监听编辑结束事件更新行数据
javascript
复制代码
onEndEdit:function (index, row, changes) {
if(editorIndex === index) {
editorIndex = -1;
var dg = $(this);
dg.datagrid("updateRow",index,row)
}
},