bootstrap -table 給表格單元格內添加按鈕和事件

1、初始化注意事項

//這段必須放在表格初始化之前。

function addFunctionAlty(value, row, index) {
       return [
       '<button id="bind" type="button" class="btn btn-default">綁定</button>',
       '<button id="unbind" type="button" class="btn btn-default">解綁</button>',
       ].join('');
     } 
window.operateEvents = {
        'click #bind': function (e, value, row, index) {
           alert(row.qxxh);
           $("#upload").modal('show');
         }, 'click #unbind': function (e, value, row, index) {
           alert(row.qxxh);
           $("#upload").modal('show');
         }
       };

// 表格初始化
    $('#table').bootstrapTable({
        pagination: true,
        showColumns: true,
        pageSize: 10,
        pageNumber: 1,
        pageList: [10, 25, 50],
        showRefresh: true,
        smartDisplay: false,
        singleSelect: true, // 單選checkbox
        clickToSelect: true,
        uniqueId: 'id',
        method: 'get',
        url: '/sys/netbar/manage/list/data',
        dataType: 'json',
        sidePagination: 'server',
        toolbar: '#toolbar',
        queryParams: function (params) {
            var params = {
                offset: params.offset,   //數據起始
                limit: params.limit,  //偏移量
                netbarName: $("#netbarName").val(),
                netbarNo: $("#netbarNo").val(),
                areaCode: $("#areaCode").val()
            };
            return params;
        },
        columns: [{
            checkbox: true
        }, {
            field: 'netbarNo',
            title: '網吧編號',
        }, {
            field: 'name',
            title: '網吧名稱',
        }, {
            field: 'manager',
            title: '負責人',
        }, {
            field: 'phone',
            title: '手機號',
        }, {
            field: 'createTimeStr',
            title: '創建時間',
        }, {
            field: 'address',
            title: '地址',
        }, {
            field: 'operate',
            title: '操作',
            events: operateEvents,//給按鈕注冊事件
            formatter: addFunctionAlty//表格中增加按鈕  
        }]
    });

2、效果如下

 

 

 

參考：

https://blog.csdn.net/zhaoyaxiansheng/article/details/88121991?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

 

 

 https://www.cnblogs.com/Andrew520/p/9706990.html