BootstrapTable 行内编辑解决方案:bootstrap-table-editor
最近开发的一个业务平台,是一个低代码业务平台。其中用到的了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/bootstrap-table-editor
其中包括了组件代码和相关示例代码。
有兴趣的可以关注。
更多优秀内容,欢迎关注公众号 “易施管理软件EasyBPM” 。
相关文章
- 用了那么久的Lombok,你知道它的原理么?
- 几个友好Java代码习惯建议
- Fury:一个基于JIT动态编译的高性能多语言原生序列化框架
- 函数式编程在 Go 泛型下的实用性探索
- 聊一聊 Java 面向对象
- C语言库函数-printf()
- 跟着 Guava 学 Java 之 不可变集合
- Seaborn 可视化进阶之 FacetGrid 结构图
- 别再用 System.currentTimeMillis() 统计耗时了,太 Low,StopWatch 好用到爆!
- 速度起飞!替代 pandas 的八个神库
- C开发中段错误的三种调试方法
- 为了避免内存攻击,美国国家安全局提倡Rust、C#、Go、Java、Ruby 和 Swift,但将 C 和 C++ 置于一边
- 70行代码撸一个桌面自动翻译神器!
- 使用 LGBM 等模型预测信用卡潜在客户
- C语言中宏定义的盲区有哪些?
- Java 是值传递还是引用传递?
- C语言中匿名的最高境界
- 从SPserver到BRPC
- 如何在 Spring Boot 中使用 Quartz 调度作业
- 一个 print 函数,挺会玩啊?