BootstrapTable 行内编辑解决方案：bootstrap-table-editor
BootstrapTable 行内编辑解决方案：bootstrap-table-editor
用户3158888
发布于 2022-03-22 14:06:05
发布于 2022-03-22 14:06:05
文章被收录于专栏：计算机图形学 前端可视化 WebGL
最近开发的一个业务平台，是一个低代码业务平台。其中用到的了bootstrap-table组件。但是bootstrap-table自身不带编辑功能。 通过搜索发现，网上大部分的解决方案都是使用x-editable, x-editable是一个通用的编辑能力组件，可以给任何元素都加上编辑能力，功能强大，可以编辑文本，数字，选项，时间等等各种类型的数据。
但是x-editable有一个比较不好的地方，x-editable的编辑模式是弹框的形式，如下图所示：
image.png
我希望的是直接在单元格进行编辑的行内编辑，所以感觉x-editable并不是很合适。 但是发现并没有其他更好的方案，于是自己动手写了一个简单的组件bootstrap-table-editor。 bootstrap-table-editor可以用于BootstrapTable行内编辑，支持文本，数字，下拉选项等。 编辑方式如下所示：
image.png
image.png
image.png
要实现图中所示，首先是要引入bootstrap-table-editor：
<script src="./libs/bootstrap-table-editor.js"></script>然后在表格的属性中指定editable未true：
let tableOptions = {
columns:columns,
editable:true, //editable需要设置为 true
}然后在需要编辑的列上面指定editable属性，该属性上面可以指定编辑器的类型，目前支持文本，数字和下拉框。
let columns = [{
title: "编号",
field: "id",
sortable: true,
width:200,
editable:false,
},{
title: "月份",
field: "month",
sortable: true,
width:200,
formatter:function(v){
return v + "月"
},
editable:{
type:"select",
options:{
items:[{
value:1,
label:"1月",
},{
value:2,
label:"2月",
},{
value:3,
label:"3月",
},{
value:4,
label:"4月",
},{
value:5,
label:"5月",
}]
}
}
},{
title: "部门",
field: "department",
sortable: true,
width:200,
editable:{
type:"select",
options:{
items:[
"技术部","生产部","管理中心"
]
}
}
},{
title: "管理费用",
field: "fee",
sortable: true,
width:200,
editable:{
type:"number"
}
},{
title: "备注",
field: "comment",
sortable: true,
width:200,
editable:true,
// editable:{
// type:"text"
// }
},];其中editable为true的时候，默认是文本编辑器，指定编辑器类型未select时候，需要指定下拉框的items。
以上是主要的说明，目前该组件功能还比较间的，但是已经适合了我们业务系统的需要了。如果客户需要更加丰富的功能，可以基于组件进行扩展，该组件的开源地址如下： https://gitee.com/netcy/boots... 其中包括了组件代码和相关示例代码。 有兴趣的可以关注。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
