bootstrap-table可编辑下拉

先看效果

bootstrap-table-editable.gif
1、想要单元格就能够编辑的效果，所以用到了bootstrap-table自带的onClickCell单击某格触发的事件，再利用html的contenteditable属性规定元素内容是否可编辑实现单元格编辑的效果。

2、弹出的输入框和单选框用到的是bootstrap-editable.js、bootstrap-table-editable.js、bootstrap-editable.css，缺点是输入框需要点击输入框里面的内容才能够编辑。

onClickCell + contenteditable

• 单元格可编辑

$(function() {
  $("#bootstrap-table").bootstrapTable({
    url: "url",
    columns: [{
        checkbox: true
      }, {
        field: "UserName",
        title: "用户名",
      },
      onClickCell: function(field, value, row, $element) {
        $element.attr('contenteditable', true); // 单元格可编辑
        $element[0].focus(); // 聚焦
        var oldValue = $element.html(); //获取旧数据
        if(oldValue == '-') { //清除默认值
            $element.empty('');
        }
        $element.blur(function() {
            var index = $element.parent().data('index');
            var tdValue = $element.html();
            saveData(index, field, tdValue);
          }
        },
      ],
    });
});

function saveData(index, field, value) {
  // 保存到表格后使用getSelections or getData才可以取到编辑的数据 
  $('#bootstrap-table').bootstrapTable('updateCell', {
    index: index, //行索引
    field: field, //列名
    value: value //cell值
  })
}

bootstrap-editable + bootstrap-table-editable

引入bootstrap-editable.js、bootstrap-table-editable.js、bootstrap-editable.css

• 编辑框

columns: [{
  checkbox: true
}, {
  field: "UserName",
  title: "用户名",
  editable: {
    type: 'text',
    title: '用户名',
    emptytext: '张三'
  },
}],

• 下拉框
  下拉框value和defaultValue没生效的情况下，把bootstrap-editable.min.js文件替换bootstrap-editable.js

columns: [{
  checkbox: true
}, {
  field: 'status',
  title: '状态',
  editable: {
    type: 'select',
    title: '状态',
    source: [{
      value: 0,
      text: "已通过"
    }, {
      value: 1,
      text: "未通过"
    }],
    emptytext: '更改状态',
    showbuttons: true,
    value: 1, // 单元格的默认值
    defaultValue: 1, // 下拉框的默认值
  },
}]

关注公众号【前端来入坑】回复bootstrap-editable获取js、css

参考
X-editable Demo
JS组件系列——BootstrapTable 行内编辑解决方案