參考資料 Bootstrap Table文檔

以下內容只涉及到參數columns

columns主要參數

field：表格的主體內容

title：表格的表頭內容

formatter：function(value, row, index){}

events：function(value, row, index){}

value：字段值

row：行記錄數據


index：行索引

<table data-toggle="table" id="workTable"></table>

<!-- Bootstrap Table js代碼 -->
$('#workTable').bootstrapTable({
    striped: true,          // 顯示條紋表格
    pagination: true,       // 顯示表格分頁組件
    pageList: [1, 3, 5],    // 設置每頁顯示數據條數框
    pageSize: 3,            // 頁面默認每頁顯示數據條數
    pageNumber: 1,          // 設置首頁頁碼
    // 以下為本文章核心代碼 columns
    columns: [{
        field: 'id',
        title: '編 號'
    }, {
        field: 'username',
        title: '用 戶'
    }, {
        field: 'description',
        title: '角 色'
    }, {
        field: 'task',
        title: '描 述'
    }, {
        field: 'user',
        title: '員 工'
    }, {
        field: 'operate',
        title: '操作',
        formatter: btnGroup,    // 自定義方法，添加按鈕組
        events: {               // 注冊按鈕組事件
            'click #modRole': function (event, value, row, index) {
                showUser(row.id, row.username)
            },
            'click #modUser': function (event, value, row, index) {
                showInfo(row.id, row.username, row.user)
            },
            'click #delUser': function (event, value, row, index) {
                showUsername(row.id, row.username)
            }
        }
    }]
});
function btnGroup () {   // 自定義方法，添加操作按鈕
    // data-target="xxx" 為點擊按鈕彈出指定名字的模態框
    let html =
        '<a href="####" class="btn btn-info" id="modRole" data-toggle="modal" data-target="#editrole" title="修改權限">' +
        '<span class="glyphicon glyphicon-edit"></span></a>' +
        '<a href="####" class="btn btn-warning" id="modUser" data-toggle="modal" data-target="#editinfo" ' +
        'style="margin-left:15px" title="修改用戶">' +
        '<span class="glyphicon glyphicon-info-sign"></span></a>' +
        '<a href="####" class="btn btn-danger" id="delUser" data-toggle="modal" data-target="#deleteuser" ' +
        'style="margin-left:15px" title="刪除用戶">' +
        '<span class="glyphicon glyphicon-trash"></span></a>'
    return html
};
......
......
......
// 以下內容為觸發一定條件來刷新Bootstrap Table數據，核心為
// $("#workTable").bootstrapTable('load', data);
$('#rolelist li').on('click', function () {
    let count=$(this).index()
    let rolecontent=$('#rolelist li').eq(count).text()
    $('#current_role').text(rolecontent)
    let deliver_id = $(this).attr('data-roleid')
    $.ajax({
        type: 'POST',
        url: '/user/refresh',
        async: false,
        data: {
            role: deliver_id
        },
        success: function (data) {
            console.log(data)
            $("#workTable").bootstrapTable('load', data)  // 根據Json動態加載Table
        }
    })
});

行記錄數據 row 示例：

總結

以上是生活随笔為你收集整理的Bootstrap Table 列参数columns使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。