bootstrapTable 实现指定字段行内编辑，无弹窗，自动保存

    最近做一个项目时，使用bootstrapTable 作为表格进行数据展示，客户要求对数量字段更直观的行内编辑，研究了一下网上的方案并参考了下面的文章 bootstrapTable行内动态编辑行中某列字段数据（优化版：无需弹框，直接在行内更新）

，对文中的代码进行改进，消除了bug，实现了双击行内编辑，自动保存的效果如下图。

实现思路参照 bootstrapTable API 中的 onDblClickCell 和updateCell 方法

onDblClickCell

dbl-click-cell.bs.table

field, value, row, $element

当用户双击某一列的时候触发，参数包括： field：点击列的 field 名称， value：点击列的 value 值， row：点击列的整行数据， $element：td 元素。

 

updateCell

params

更新一个单元格，params包含以下属性： index: 行索引。 field: 字段名称。 value: 新字段值。

 

 

本项目采用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增加使能参数。如下所示。