EasyUI数据表格中嵌入下拉框

效果

代码

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)
      }
  },
相关推荐
beibeibeiooo几秒前
【CSS3】02-选择器 + CSS特性 + 背景属性 + 显示模式
前端·css·css3
uhakadotcom34 分钟前
Meta Horizon OS 开发工具:打造更好的 MR/VR 体验
javascript·后端·面试
helbyYoung1 小时前
【零基础JavaScript入门 | Day7】三大交互案例深度解析|从DOM操作到组件化开发
开发语言·javascript
uhakadotcom1 小时前
刚刚发布的React 19.1提供了什么新能力?
前端·javascript·面试
uhakadotcom1 小时前
Expo 简介:跨平台移动应用开发的强大工具
前端·javascript·面试
markzzw1 小时前
浏览器插件钱包(一) - 区块链世界的入口
前端·web3·区块链
夕水2 小时前
终于,我也能够写出一款代码编辑器
前端
red润2 小时前
npm包autocannon牛逼的后台压力测试库
前端·javascript·node.js
黄蘑菇2 小时前
white-space、word-break、overflow-wrap(原名word-wrap)的区别
前端
渔樵江渚上2 小时前
JavaScript函数柯里化:优雅的函数式编程实践
前端·javascript·面试