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