bootstarp-table表格中嵌套多个BUTON按钮实现
有时我们需要在bootsharp-table表格中嵌套多个按钮，来实现不同的功能，大概界面如下：
实现功能如下：
1：构建表格
中间部分字段已删除。
visible: false 该列隐藏，界面不显示
events: operateEvents ：给按钮注册事件
formatter: operateFormatter：表格中增加按钮
$("#TbRoleList").bootstrapTable({
url: "../Role/Get",
columns: [
[
{
field: '',
checkbox: true,
align: 'center',
valign: 'middle',
}, {
title: 'Id',
field: 'Id',
align: 'center',
valign: 'middle',
visible: false
}, {
title: '角色',
field: 'RoleName',
align: 'center',
valign: 'middle',
sortable: false,
}, {
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
]
});
2:表格中增加按钮
operateFormatter(value, row, index)：这三个参数是bootsharp-table默认的
function operateFormatter(value, row, index) {
return [
'<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;">A权限</button>',
'<button type="button" class="RoleOfB btn btn-default btn-sm" style="margin-right:15px;">B权限</button>',
'<button type="button" class="RoleOfC btn btn-default btn-sm" style="margin-right:15px;">C权限</button>',
'<button type="button" class="RoleOfD btn btn-default btn-sm" style="margin-right:15px;">绑定D</button>',
'<button type="button" class="RoleOfEdit btn btn-default btn-sm" style="margin-right:15px;">编辑</button>'
].join('');
}
3：注册按钮的点击事件
每个按钮对应哪个点击事件，是用Class里面的属性标识的，如上步骤2（比如：RoleOfA）
window.operateEvents = {
'click .RoleOfA': function (e, value, row, index) {
alert("A");
},
'click .RoleOfB': function (e, value, row, index) {
alert("B");
},
'click .RoleOfC': function (e, value, row, index) {
alert("C");
},
'click .RoleOfEdit': function (e, value, row, index) {
});
}
};