Bootstrap Table 列参数columns使用总结

参考资料 Bootstrap Table文档

以下内容只涉及到参数columns

columns主要参数

field：表格的主体内容

title：表格的表头内容

formatter：functionvalue, row, index){}

events：functionvalue, 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) {
                showUserrow.id, row.username)
            },
            'click #modUser': function event, value, row, index) {
                showInforow.id, row.username, row.user)
            },
            'click #delUser': function event, value, row, index) {
                showUsernamerow.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').eqcount).text)
    $'#current_role').textrolecontent)
    let deliver_id = $this).attr'data-roleid')
    $.ajax{
        type: 'POST',
        url: '/user/refresh',
        async: false,
        data: {
            role: deliver_id
        },
        success: function data) {
            console.logdata)
            $"#workTable").bootstrapTable'load', data)  // 根据Json动态加载Table
        }
    })
});

行记录数据 row 示例：