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>