Bootstrap Table 列参数columns使用总结

前言

参考资料 Bootstrap Table文档
以下内容只涉及到参数columns

columns主要参数

field：表格的主体内容
title：表格的表头内容
formatter：function(value, row, index){}
events：function(value, row, index){}

• value：字段值
• row：行记录数据
• index：行索引

<!-- Bootstrap Table html代码 -->
<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 示例：

控制台输出 用户表展示

欢迎关注我的个人小程序

996ICU小程序.png

谢谢阅读，有帮助的点个❤！