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