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

bootstarp-table表格中嵌套多个BUTON按钮实现的更多相关文章

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

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

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

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

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

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

  4. 在table表格中实现圆角效果

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

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

    1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...

  6. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  7. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

  8. table表格中实现tbody部分可滚动,且thead部分固定

    1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...

  9. table表格中加入<a>标签,使内容上下居中的方法。

    主要思路:定义好表格单元格的width和height,再加入<a>后,设置<a>的width=100%,height=100%填充整个单元格.那么此时设置上下左右居中样式就只需 ...

随机推荐

  1. Android狂记忆

    虽然说技术人员偏爱实战,而不屑理论或记忆,但实战之前,若是记忆一些知识,开发起来将会如虎添翼,不说了,开始狂记吧! Android 系统包说明: android.app  :提供高层的程序模型.提供基 ...

  2. Have Fun with Numbers及循环链表(约瑟夫问题)

    1. 循环链表(约瑟夫问题) https://github.com/BodhiXing/Data_Structure 2. Have Fun with Numbers https://pta.pate ...

  3. AX7: How to deploy a Package

    A. Using LCS services. B. Manual using command prompt. Here I’ll show using command prompt, as I fou ...

  4. 答:SQLServer DBA 三十问之一: char、varchar、nvarchar之间的区别(包括用途和空间占用);xml类型查找某个节点的数据有哪些方法,哪个效率高;使用存储 过程和使用T-SQL查询数据有啥不一样;

    http://www.cnblogs.com/fygh/archive/2011/10/18/2216166.html 1. char.varchar.nvarchar之间的区别(包括用途和空间占用) ...

  5. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  6. 45、Docker 加 tensorflow的机器学习入门初步

    [1]最近领导天天在群里发一些机器学习的链接,搞得好像我们真的要搞机器学习似的,吃瓜群众感觉好神奇呀. 第一步 其实也是最后一步,就是网上百度一下,Docker Toolbox,下载下来,下载,安装之 ...

  7. linux学习8 第八章 权限管理

    8.1 ACL权限 8.2 文件特殊权限 8.3 文件系统属性chattr权限 8.4 系统命令sudo权限 8.1 ACL权限 ACL权限简介与开启 查看与设定ACL权限 最大有效权限与删除ACL权 ...

  8. http://bbs.ednchina.com/BLOG_345002072_2001308.HTM

    http://bbs.ednchina.com/BLOG_345002072_2001308.HTM

  9. Microsoft CRM 2013 设置默认组织 default organization

    Microsoft CRM 2013 在部署管理器里没有设置默认组织的功能(以前4.0是有的),所以如果安装了多组织并且某些用户在多组织里同时存在这就涉及默认组织的设置问题,或者在安装outlook ...

  10. 笔记9-徐 DBCC SHRINKFILE不起作用的原因

    1 , , , , , , , , ,40) ,1 page_id pg_alloc ext_size obj_id index_id partition_number partition_id ia ...