最近做一個專案時，使用bootstrapTable 作為表格進行資料展示，客戶要求對數量欄位更直觀的行內編輯，研究了一下網上的方案並參考了下面的文章 bootstrapTable行內動態編輯行中某列欄位資料（優化版：無需彈框，直接在行內更新）

，對文中的程式碼進行改進，消除了bug，實現了雙擊行內編輯，自動儲存的效果如下圖。

實現思路參照 bootstrapTable API 中的 onDblClickCell 和updateCell 方法

本專案採用ruoyi框架，在ry-ui.js 中的 $('#bootstrap-table').bootstrapTable({   中加入 js程式碼如下

 onDblClickCell : function(field,value,row,$element){
                        var upIndex = $element[0].parentElement.rowIndex -1;
                        if(field == options.editFiled){
                            $element[0].innerHTML="<input id='inputCell' type='text' name='inputCell' style ='width: 40px' value='"+value+"'>";
                            $("#inputCell").focus();
                            $("#inputCell").blur(function(){
                                var newValue = $("#inputCell").val();
                                row[field] = newValue;
                                $(this).remove();
                                $('#bootstrap-table').bootstrapTable('updateCell', {
                                    index: upIndex,
                                    field:field,
                                    value: newValue
                                });
                                $.operate.rowedit(row);
                                // updateExbEnt();
                            });
                        }
 

     雙擊單元格後觸發onDblClickCell 事件，獲取到行號，插入input元素即可行內編輯，編輯完後觸發updateCell 方法更新單元格資料。

 下面是js封裝的操作函式，用於提交資料，返回操作結果。

 // 操作封裝處理
        operate: {
 // post請求傳輸
            post: function(url, data) {
            	$.operate.submit(url, "post", "json", data);
            },
   // 修改行
            rowedit: function(row) {
                $.modal.loading("正在處理中，請稍後...");
        	    var url =  $.table._option.roweditUrl;
                var config = {
                    url: url,
                    type: "post",
                    dataType: "json",
                    data: row,
                    success: function(result) {
                        $.operate.ajaxSuccess(result);
                    }
                };
                $.ajax(config)
            },
    // 儲存結果彈出msg重新整理table表格
            ajaxSuccess: function (result) {
            	if (result.code == web_status.SUCCESS) {
                	$.modal.msgSuccess(result.msg);
            		$.table.refresh();
                } else {
                	$.modal.alertError(result.msg);
                }
            	$.modal.closeLoading();
            }

          ｝
 

上面是js封裝的操作函式，用於提交資料，返回操作結果。

在html頁面檔案的

 $(function () {
        var options = {

  editFiled:"shuliang",   //加入需要編輯的屬性欄位名稱  

後端程式碼可以直接用儲存編輯的介面。

  @PostMapping("/edit")
    @ResponseBody
    public AjaxResult editSave(Yuce yuce) {
        yuce.setUpdateBy(ShiroUtils.getLoginName());
        return toAjax(yuceService.updateYuce(yuce));
    }

本需求只需編輯一個欄位。如果需要編輯多個欄位，需修改上面的js程式碼，動態傳遞多個欄位引數即可。 

如需許可權控制，可增加開關按鈕，並在js增加使能引數。如下所示。