最近开发的一个业务平台,是一个低代码业务平台。其中用到的了 bootstrap-table 组件。然而 bootstrap-table 本身不带编辑性能。
通过搜寻发现,网上大部分的解决方案都是应用 x -editable, x-editable 是一个通用的编辑能力组件,能够给任何元素都加上编辑能力,功能强大,能够编辑文本,数字,选项,工夫等等各种类型的数据。
然而 x -editable 有一个比拟不好的中央,x-editable 的编辑模式是弹框的模式,如下图所示:
我心愿的是间接在单元格进行编辑的行内编辑,所以感觉 x -editable 并不是很适合。然而发现并没有其余更好的计划,于是本人入手写了一个简略的组件 bootstrap-table-editor。
bootstrap-table-editor 能够用于 BootstrapTable 行内编辑,反对文本,数字,下拉选项等。
编辑形式如下所示:
要实现图中所示,首先是要引入 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…
其中包含了组件代码和相干示例代码。
有趣味的能够关注。
更多优良内容,欢送关注公众号“易施管理软件 EasyBPM”。