最近做一个项目时，使用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增加使能参数。如下所示。