BootstrapTable列参数columns使⽤总结
参考资料
以下内容只涉及到参数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: '操作',
tabletable
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" ' +
' title="修改⽤户">' +
'<span class="glyphicon glyphicon-info-sign"></span></a>' +
'<a href="####" class="btn btn-danger" id="delUser" data-toggle="modal" data-target="#deleteuser" ' +
' 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 ⽰例：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。