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/boots...
其中包括了組件代碼和相關示例代碼。
有興趣的能夠關注。

更多優秀內容，歡迎關注公衆號 「易施管理軟件EasyBPM」 。