效果
代码
$ ( 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: '启用' } ]
}
}
}
] ]
} ) ;
} )
解析
列渲染为下拉框
{ 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: '启用' } ]
}
}
}
双击触发编辑行
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)
}
} ,