随笔- 1395 文章- 2 评论- 1664 阅读- 637万

python测试开发django-127.bootstrap-table 如何给单元格添加功能按钮(编辑/删除) 和事件（events）

前言

在bootstrap-table表格最后一列添加操作按钮，可以添加编辑和删除按钮，方便操作单行数据。

添加编辑和删除按钮

在 columns 给操作按钮添加events事件，此代码需在初始化table表格前写

"click #editTable" 点击#editTable button按钮，触发对应的事件，可以传四个参数e, value, row, index
"click #deleteTable" 点击#deleteTable button按钮，触发对应的事件，可以传四个参数e, value, row, index

其中row是代表对应点击行的json对象，index是对应行在当前表格的索引（从0开始）

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/

<script>
    // 给按钮添加事件
    window.operateEvents = {
        "click #editTable": function(e, value, row, index){
            //编辑按钮事件
            alert("编辑按钮"+JSON.stringify(row))
        },
        "click #deleteTable": function(e, value, row, index){
            //删除按钮事件
            alert("删除按钮事件,id:"+row.id)
        }
    }
</script>

初始化table表格

<script>
    var url = '/teacher/info';
    var columns = [
        {
            checkbox: true,
            visible: true                  //是否显示复选框
        },
        {
            field: 'id',
            title: 'ID'

        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄',
            sortable: true
        },
         {
            field: 'tel',
            title: '电话'
        },
         {
             field:'operate',
             title: '操作',
             width: 150,
             align: 'center',
             valign: 'middle',
             events: operateEvents,   //给按钮注册事件
             formatter: actionFormatter
         }
    ];
    $("#table").bootstrapTable({
        toolbar: '#toolbar',                //自定义工具按钮
        url: url,                           //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 20, 50, 100, 'All'], //可供选择的每页的行数（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页
        search: true,                       //是否显示表格搜索
        showSearchButton: true,             //搜索按钮
{#        showSearchClearButton: true,       //清空输入框#}
{#        singleSelect: true,#}
        clickToSelect: true,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度
        classes: "table table-bordered table-striped",
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        columns: columns,                   //列参数
        //detailView: true,                  //是否显示父子表
        //得到查询的参数，会在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
        queryParams: function (params) {
            // params对象包含：limit, offset, search, sort, order
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp;
            temp = {
                page: (params.offset / params.limit) + 1,   //页码,  //页码
                size: params.limit   //页面大小
                //查询框中的参数传递给后台
                //search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
            };
            return temp;
        }


    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {
            return [
       '<button id="editTable" type="button" style="margin:5px" class="btn  btn-xs btn-info">编辑</button>',
       '<button id="deleteTable" type="button" style="margin:5px" class="btn  btn-xs btn-danger">删除</button>',
       ].join('');

        }
</script>

实现效果

点编辑按钮，触发点击事件

operateEvents 事件

继续写operateEvents 事件，点编辑按钮弹出模态框编辑,点删除按钮弹出删除确认模态框

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/

<script>
    // 给按钮添加事件
    window.operateEvents = {
        "click #editTable": function(e, value, row, index){
            //编辑按钮事件
            alert("编辑按钮"+JSON.stringify(row));
            $("#modal_id").val(row.id);
            $("#modal_name").val(row.name);
            $("#modal_age").val(row.age);
            $("#modal_tel").val(row.tel);
            $("#myModal").modal();  //调出模态框
        },
        "click #deleteTable": function(e, value, row, index){
            //删除按钮事件
            alert("删除按钮事件,id:"+row.id);
            //把ids的值给到隐藏输入框
            $('#del_ids').val(row.id);
            //调出删除模态框
            $("#delModal").modal();
        }
    }
</script>