bootstrapTable 实现多条字段行内编辑

var culine ={editFiled:"current_limit_line"};

var cuct={editFiled:"current_limit_ct"};

var cupro={editFiled:"current_limit_protection"};

​

function show() {
    var param = $("#findForm").serializeArray();
    console.log(param);
    $('#subTable').bootstrapTable({
        url: "line/plist",
        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
        method: 'post',      //请求方式（*）
        dataType: "json",

        pagination: true,     //是否显示分页（*）
        sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,      //初始化加载第一页，默认第一页
        pageSize: 20,      //每页的记录行数（*）
        pageList: [20, 50, 100, 500,1000,2000,5000],  //可供选择的每页的行数（*）
        showPaginationSwitch: false,//是否显示隐藏分页按钮
        queryParams: function (params) {//上传服务器的参数
            var param = $("#findForm").serializeArray();
            var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                size: params.limit, // 每页显示数量
                page: (params.offset / params.limit), //当前页码
                name: param[0].value,
                voltage_level:param[1].value,
                operation_status:param[2].value,
                operate_by:param[3].value,
                // current_limit_line:param[4].value,
                // current_limit_ct:param[5].value,
                // current_limit_protection:param[6].value
            };
            return temp;
        },
        // totalField: 'totalPages',
        // dataField: 'content', //后端 json 对应的表格数据 key

        toolbar: '#subToolbar',    //工具按钮用哪个容器
        striped: true,      //是否显示行间隔色
        cache: true,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sortable: true,      //是否启用排序
        sortOrder: "desc",     //排序方式
        //queryParams: oTableInit.queryParams,//传递参数（*）
        search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
        showColumns: true,     //是否显示所有的列按钮
        showRefresh: true,    //是否显示刷新按钮
        minimumCountColumns: 2,    //最少允许的列数
        clickToSelect: true,    //是否启用点击选中行
        singleSelect: false,	//单选
        maintainSelected: true,
        // height: 550,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",      //每一行的唯一标识，一般为主键列
        showToggle: true,     //是否显示详细视图和列表视图的切换按钮
        cardView: true,     //是否显示详细视图
        detailView: false,     //是否显示父子表
        showExport: true,
        exportDataType: "all",
        mobileResponsive: true,
        iconSize: 'outline',
        icons: {
            refresh: 'glyphicon-repeat',
            toggle: 'glyphicon-list-alt',
            columns: 'glyphicon-list'
        },
        columns: [{
            field: 'checked',
            checkbox: true
        }, {
            field: 'id',
            title: 'id',
            // visible:false
        }, {
            field: 'name',
            title: '母线名称'
        }, {
            field: 'id_d5000_aclinesegment',
            title: 'd5000线路id'
        }, {
            field: 'voltage_level',
            title: '电压等级'
        }, {
            field: 'aaa.status',
            title: '运行状态',
        }, {
            field:'current_limit_line',
            title:'线路限额'
        }, {
            field:'current_limit_ct',
            title:'ct限额'
        },{
            field:'current_limit_protection',
            title:'人工填写限额'
        },{
            field: 'line_length',
            title: '线路长度'
        }, {
            field: 'bbb.operate_by',
            title: '管辖权',        
        },{
            field: 'geography.geo_by',
            title: '地理范围',
        }

        ],

 

//双击进行线路限额、ct限额、人工填写限额的修改
onDblClickCell : function(field,value,row,$element){
    var upIndex = $element[0].parentElement.rowIndex-1;
    if(field == culine.editFiled||field==cuct.editFiled||field==cupro.editFiled) {
        $element[0].innerHTML = "<input id='inputCell' type='text' name='inputCell' style ='width: 150px' value='" + value + "'>";
        $("#inputCell").focus();
        $("#inputCell").blur(function () {
            var newValue = $("#inputCell").val();
            row[field] = newValue;
            $(this).remove();
            $('#subTable').bootstrapTable('updateCell', {
                index: upIndex,
                field: field,
                value: newValue,
            });
            updateBus3(row)
        });
    }
},

onLoadSuccess: function (data) {

    onLoad(data);
},

 @RequestMapping(value = "/line/updateLine",method = RequestMethod.POST)
    @ResponseBody
    public Map updateLine(@RequestParam int id, HttpServletRequest request){
        Map<String,Object> resultMap=new HashMap<>();
        Line line=lineService.findById(id);
        int operate_by=Integer.valueOf(request.getParameter("operate_by"));
        int operation_status=Integer.valueOf(request.getParameter("operation_status"));
        int geo_area=Integer.valueOf(request.getParameter("geo_area"));
        double current_limit_line=Double.valueOf(request.getParameter("current_limit_line"));
        double current_limit_ct= Double.valueOf(request.getParameter("current_limit_ct"));
        double current_limit_protection= Double.valueOf(request.getParameter("current_limit_protection"));
        line.setOperate_by(operate_by);
        line.setOperation_status(operation_status);
        line.setGeo_area(geo_area);
        line.setCurrent_limit_line(current_limit_line);
        line.setCurrent_limit_ct(current_limit_ct);
        line.setCurrent_limit_protection(current_limit_protection);
        lineService.edit(line);

        resultMap.put("success",true);
        return resultMap;
    }
}