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

最新推荐文章于 2023-02-17 16:17:16 发布

原创

最新推荐文章于 2023-02-17 16:17:16 发布 · 6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrapTable

本文介绍了如何在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');