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 [
                '<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) {
                });
            }
        };  

来自为知笔记(Wiz)