EasyUI数据表格中嵌入下拉框

效果

代码

$(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)}},