最近開發(fā)的一個(gè)業(yè)務(wù)平臺(tái)，是一個(gè)低代碼業(yè)務(wù)平臺(tái)。其中用到的了bootstrap-table組件。但是bootstrap-table自身不帶編輯功能。
通過搜索發(fā)現(xiàn)，網(wǎng)上大部分的解決方案都是使用x-editable, x-editable是一個(gè)通用的編輯能力組件，可以給任何元素都加上編輯能力，功能強(qiáng)大，可以編輯文本，數(shù)字，選項(xiàng)，時(shí)間等等各種類型的數(shù)據(jù)。

但是x-editable有一個(gè)比較不好的地方，x-editable的編輯模式是彈框的形式，如下圖所示：

image.png

我希望的是直接在單元格進(jìn)行編輯的行內(nèi)編輯，所以感覺x-editable并不是很合適。 但是發(fā)現(xiàn)并沒有其他更好的方案，于是自己動(dòng)手寫了一個(gè)簡(jiǎn)單的組件bootstrap-table-editor。
bootstrap-table-editor可以用于BootstrapTable行內(nèi)編輯，支持文本，數(shù)字，下拉選項(xiàng)等。
編輯方式如下所示：

image.png

image.png

image.png

要實(shí)現(xiàn)圖中所示，首先是要引入bootstrap-table-editor：

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

然后在表格的屬性中指定editable未true：

 let tableOptions = {
          columns:columns,
          editable:true, //editable需要設(shè)置為 true
        }

然后在需要編輯的列上面指定editable屬性，該屬性上面可以指定編輯器的類型，目前支持文本，數(shù)字和下拉框。

  let columns = [{
            title: "編號(hào)",
            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:[
                  "技術(shù)部","生產(chǎn)部","管理中心"
                ]
              }
            }
        },{
            title: "管理費(fèi)用",
            field: "fee",
            sortable: true,
            width:200,
            editable:{
              type:"number"
            }
        },{
            title: "備注",
            field: "comment",
            sortable: true,
            width:200,
            editable:true,
            // editable:{
            //   type:"text"
            // }
        },];

其中editable為true的時(shí)候，默認(rèn)是文本編輯器，指定編輯器類型未select時(shí)候，需要指定下拉框的items。

以上是主要的說明，目前該組件功能還比較間的，但是已經(jīng)適合了我們業(yè)務(wù)系統(tǒng)的需要了。如果客戶需要更加豐富的功能，可以基于組件進(jìn)行擴(kuò)展，該組件的開源地址如下：
https://gitee.com/netcy/bootstrap-table-editor
其中包括了組件代碼和相關(guān)示例代碼。
有興趣的可以關(guān)注。

更多優(yōu)秀內(nèi)容，歡迎關(guān)注公眾號(hào) “易施管理軟件EasyBPM” 。