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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/74427.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/74427.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/74427.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！