html表格里面嵌入按钮,bootstarp-table表格中嵌套多个BUTON按钮实现

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 [

'A权限',

'B权限',

'C权限',

'绑定D',

'编辑'

].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) {

});

}

};

[Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

5种做法实现table表格中的斜线表头效果

table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

在table表格中实现圆角效果

在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果 代码实现效果: &lt ...

table表格整体居中 和 table表格中各行各列内容居中

1.table表格整个居中