BootStrap Table行内编辑，“重金求来”Alibaba技术官并发编程笔记

BootStrap作为目前比较流行的一款前端框架，平时开发中也用到的很多，之前在写项目页面用的Bootstrap，数据展示用的BootStrap Table。因为项目需求，需要对表格中某些字段可以直接在表格中编辑保存。

对于BootStrap Table表格内编辑这里整理了两种方法。想了解BootStrap Table的小伙伴可以移步到Bootstrap Table数据表格的使用指南。

第一种方法

通过contenteditable属性设置元素的内容是可编辑。

优点：简单，代码量少。

缺点：由于BootStrap Table表格可以设置显示或隐藏列，所以指定某一列可编辑就比较麻烦。

方法思路

结合BootStrap Table中onClickCell单击单元格事件和onDblClickCell双击单元格事件属性来实现。根据项目需求设置单击或者双击事件触发编辑单元格内容事件。

在渲染表格属性时，添加单击单元格事件属性。

代码如下。

/**

• onClickCell: 单击单元格触发

• field 点击单元格的字段名称

• value 点击单元格的数据值

• row 点击列的整行数据

• $element 当前点击td的Dom元素

*/

onClickCell: function(field, value, row, $element) {

$element.attr(‘contenteditable’, true);

//元素失去焦点事件

$element.blur(function() {

//单元格修改后的的值

let tdValue = $element.html();

console.log(field);

console.log(tdValue);

console.log(row);

})

}

添加上面代码后，就可以看到单元格的可编辑效果了。如下图。