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)