AdminLTE3 + Bootstrap4 + BootstarpTable使用editable

AdminLTE3是基于Bootstrap4的。BootstrapTable是单独下载的。。但是无法使用bootstrap table里面的editable插件，需要重新下载x-editable,https://github.com/vitalets/x-editable

引用如下：我这里少了bootstrap CSS，因为Adminlte自己融合了

 <link rel="stylesheet" href="../dist/css/adminlte.min.css" />
  <link rel="stylesheet" href="../plugins/x_editable/bootstrap-editable.css" />
  <link rel="stylesheet" href="../plugins/bootstrap-table/dist/bootstrap-table.css" />
    
 <script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.bundle.js"></script>
<script src="../plugins/x_editable/bootstrap-editable.min.js"></script>
<script src="../plugins/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="../plugins/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>

在bootstrap table里需要打开editable:true

    $table.bootstrapTable({
      editable: true, //editable需要设置为 true

然后在相应字段增加editable:{} 就可以使用了。这里直接可以通过bootstraptable的getData得到修改后的数据

                    {
                        field: "vol_ratio",
                        title: "Ratio",
                        switchable: true,
                        sortable: false,
                        align: "center",
                        valign: "middle",
                        halign: "center",
                        editable: {
                            type: "text"
                        }
                    },

在我的项目中，还需要通过修改这个字段的数据来联动其他字段数据的改变，需要用到bootstraptable的onEditableSave和updateRow的功能

首先要定义一个index, 因为onEditableSave没有index参数

                columns: [
                    {
                        field: "rowId",
                        title: "ID",
                        sortable: false,
                        align: "center",
                        valign: "middle",
                        halign: "center",
                        formatter: function (value, row, index) {
                            row.rowId = index;
                            return index + 1;
                        }
                    },

                onEditableSave: function (field, row, oldValue, $el) {
                    // alert(JSON.stringify(row));
                    // alert(row.vol_ratio);
                    val_adv = row.val_adv;
                    vol_ratio = row.vol_ratio;
                    adj_adv = (val_adv*(vol_ratio/100)).toFixed(2);
                    unit_time = row.task_time_mins;
                    srt_span = row.sort_span;
                    hr_adj = (unit_time / 60 * adj_adv).toFixed(2);
                    hc_adj = (hr_adj / srt_span).toFixed(2);
                    $("#add_task_list").bootstrapTable("updateRow", {
                        index: row.rowId,
                        row: {
                            adj_adv: adj_adv,
                            hr_need: hr_adj,
                            hc_need: hc_adj
                        }
                    });
                }