前端开发 - bootstrapTable编辑列数据并提交到后台

使列可修改

            {field: 'reason', title: '申请原因', align: 'center',
                formatter: function (value, row, index) {
                    return '<input type="text" id="reason" data-index="'+index+'" onchange="changeReason(this)" value="'+value+'" />'
                }
            }

被修改后触发的监听事件：

    function changeReason(e) {
        var value = $(e).val();
        var index = $(e).attr("data-index");
        dataList[index].reason = value;
    }

其中dataList是一个全局变量

    var dataList = []; 

在数据加载成功时为其赋值：

        onLoadSuccess: function(){
            dataList = $table.bootstrapTable("getData", true);
            if(type == 2){
                $table.bootstrapTable('hideColumn', 'abstractName');//隐藏abstractName列
            }else {
                $('#table').bootstrapTable('showColumn', 'abstractName');
            }
        }

提交动作：

    function saveOrSubmit(type) {
        $.ajax({
            type: "post",
            url: "/admin/warning/apply/save",
            data: {
                saveType: type,
                dataListStr: JSON.stringify(dataList),
                bzy: $("#bzy").val(),
                kj: $("#kj").val(),
                cn: $("#cn").val(),
            },
            dataType: "json",
            success: function (msg) {
                // msg = JSON.parse(msg);
                console.log(msg);
                if (msg.code == 0) {
                    layer.msg(msg.message, {icon: 1, time: 2000}, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    });
                } else {
                    layer.msg(msg.message, {icon: 2, time: 2000})
                }
            }
        });
    }

完整代码：

    var dataList = []; 
    var $table = $('#table');
    var type = '${type}';
    $table.bootstrapTable({
        method: "POST",
        url: "${ctx!}/admin/warning/apply/getConfirmCostApplicationList/" + type,
        contentType: "application/x-www-form-urlencoded",
        striped: true,
        pagination: true, 
        pageSize: 1000,
        pageList: [1000],
        pageNumber: 1,
        sidePagination: "server",
        queryParamsType: "undefined",
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        height: $(window).height() * 0.58,
        responseHandler: function (res) {
            return {
                "rows": res.content,
                "total": res.totalElements,
            };
        },
        columns: [
            {field: 'subjectCode', title: '科目代码', align: 'center',},
            {field: 'subject', title: '科目名称', align: 'center',},
            {field: 'abstractName', title: '摘要', align: 'center',},
            {field: 'limitAmount', title: '限制金额', align: 'center',},
            {field: 'appliedAmount', title: '申请金额', align: 'center',},
            {field: 'reason', title: '申请原因', align: 'center',
                formatter: function (value, row, index) {
                    return '<input type="text" id="reason" data-index="'+index+'" onchange="changeReason(this)" value="'+value+'" />'
                }
            }
        ],
        onLoadSuccess: function(){
            dataList = $table.bootstrapTable("getData", true);
            if(type == 2){
                $table.bootstrapTable('hideColumn', 'abstractName');
            }else {
                $('#table').bootstrapTable('showColumn', 'abstractName');
            }
        }
    });

    function changeReason(e) {
        var value = $(e).val();
        var index = $(e).attr("data-index");
        dataList[index].reason = value;
    }

    function saveOrSubmit(type) {
        $.ajax({
            type: "post",
            url: "/admin/warning/apply/save",
            data: {
                saveType: type,
                dataListStr: JSON.stringify(dataList),
                bzy: $("#bzy").val(),
                kj: $("#kj").val(),
                cn: $("#cn").val(),
            },
            dataType: "json",
            success: function (msg) {
                console.log(msg);
                if (msg.code == 0) {
                    layer.msg(msg.message, {icon: 1, time: 2000}, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    });
                } else {
                    layer.msg(msg.message, {icon: 2, time: 2000})
                }
            }

        });
    }