bootstrap-table可編輯下拉

先看效果

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 行內編輯解決方案