BootstrapTable 行内编辑解决方案:bootstrap-table-editor

最近开发的一个业务平台,是一个低代码业务平台。其中用到的了bootstrap-table组件。可是bootstrap-table自身不带编辑功能。
经过搜索发现,网上大部分的解决方案都是使用x-editable, x-editable是一个通用的编辑能力组件,能够给任何元素都加上编辑能力,功能强大,能够编辑文本,数字,选项,时间等等各类类型的数据。git

可是x-editable有一个比较很差的地方,x-editable的编辑模式是弹框的形式,以下图所示:
image.pngbootstrap

我但愿的是直接在单元格进行编辑的行内编辑,因此感受x-editable并非很合适。 可是发现并无其余更好的方案,因而本身动手写了一个简单的组件bootstrap-table-editor。
bootstrap-table-editor能够用于BootstrapTable行内编辑,支持文本,数字,下拉选项等。
编辑方式以下所示:
image.png编辑器

image.png

image.png

要实现图中所示,首先是要引入bootstrap-table-editor:spa

<script src="./libs/bootstrap-table-editor.js"></script>

而后在表格的属性中指定editable未true:code

let tableOptions = {
          columns:columns,
          editable:true, //editable须要设置为 true
        }

而后在须要编辑的列上面指定editable属性,该属性上面能够指定编辑器的类型,目前支持文本,数字和下拉框。orm

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。ip

以上是主要的说明,目前该组件功能还比较间的,可是已经适合了咱们业务系统的须要了。若是客户须要更加丰富的功能,能够基于组件进行扩展,该组件的开源地址以下:
https://gitee.com/netcy/boots...
其中包括了组件代码和相关示例代码。
有兴趣的能够关注。开发

更多优秀内容,欢迎关注公众号 “易施管理软件EasyBPM” 。rem

相关文章
相关标签/搜索