前言
参考资料 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
