bootstarp-table表格中嵌套多个BUTON按钮实现

bootstarp-table表格中嵌套多个BUTON按钮实现

有时我们需要在bootsharp-table表格中嵌套多个按钮,来实现不同的功能,大概界面如下:

实现功能如下:

1:构建表格

中间部分字段已删除。

visible: false  该列隐藏,界面不显示

events: operateEvents :给按钮注册事件

formatter: operateFormatter:表格中增加按钮

 1 $("#TbRoleList").bootstrapTable({
 2                 url: "../Role/Get",
 3                 columns: [
 4                 [
 5                     {
 6                         field: ‘‘,
 7                         checkbox: true,
 8                         align: ‘center‘,
 9                         valign: ‘middle‘,
10                     }, {
11                         title: ‘Id‘,
12                         field: ‘Id‘,
13                         align: ‘center‘,
14                         valign: ‘middle‘,
15                         visible: false
16                     }, {
17                         title: ‘角色‘,
18                         field: ‘RoleName‘,
19                         align: ‘center‘,
20                         valign: ‘middle‘,
21                         sortable: false,
22                     }, {
23                         field: ‘operate‘,
24                         title: ‘操作‘,
25                         align: ‘center‘,
26                         events: operateEvents,
27                         formatter: operateFormatter
28                     }
29                 ]
30                 ]
31             });

2:表格中增加按钮

operateFormatter(value, row, index):这三个参数是bootsharp-table默认的

1  function operateFormatter(value, row, index) {
2             return [
3                 ‘<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;">A权限</button>‘,
4                 ‘<button type="button" class="RoleOfB btn btn-default  btn-sm" style="margin-right:15px;">B权限</button>‘,
5                 ‘<button type="button" class="RoleOfC btn btn-default  btn-sm" style="margin-right:15px;">C权限</button>‘,
6                 ‘<button type="button" class="RoleOfD btn btn-default  btn-sm" style="margin-right:15px;">绑定D</button>‘,
7                 ‘<button type="button" class="RoleOfEdit btn btn-default  btn-sm" style="margin-right:15px;">编辑</button>‘
8             ].join(‘‘);
9         }

3:注册按钮的点击事件

每个按钮对应哪个点击事件,是用Class里面的属性标识的,如上步骤2(比如:RoleOfA)

 1 window.operateEvents = {
 2             ‘click .RoleOfA‘: function (e, value, row, index) {
 3                 alert("A");
 4          },
 5             ‘click .RoleOfB‘: function (e, value, row, index) {
 6                 alert("B");
 7          },
 8           ‘click .RoleOfC‘: function (e, value, row, index) {
 9                 alert("C");
10          },
11             ‘click .RoleOfEdit‘: function (e, value, row, index) {
12                 });
13             }
14         };  

来自为知笔记(Wiz)

时间: 2024-10-10 12:45:07

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

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

本文将演示如何在表格中嵌套另一个表格并使Cell的高度自适应,创建更加强大的布局效果. 在项目文件夹[DemoApp]上点击鼠标右键,弹出右键菜单. [New File]->[Cocoa Touch Class]->[Next]-> [Class]:CustomizeUITableViewCell ,类名. [Subclass of]:UITableViewCell ,父类 [Language]:Swift ->[Next]->[Create]在项目导航区,打开刚刚创建的代码

使用JS遍历Table表格中所有单元格内容

通过JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现:使用该方法时必须为Table表格设置唯一的id属性. function GetInfoFromTable() { var tableInfo = ""; var tableObj = document.getElementByIdx_x("tableid"); //获取表格对象 for (var i = 0; i < tableObj.rows.length; i++) { //遍历Tabl

java循环取出word table表格中所有的值

//往表格里面插入值或者打开表格填写 <%@ page language="java" import="java.util.*, java.awt.*" pageEncoding="gb2312"%> <%@page import="com.zhuozhengsoft.pageoffice.*, com.zhuozhengsoft.pageoffice.wordwriter.*"%> <%@ ta

table表格中文字超出显示省略号

第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止.*/ overflow:hidden;/*隐藏多余的内容*/ text-overflow:ellopsis;/*显示省略符号来代表被修剪的文本 for IE*/ -moz-text-overflow: ellipsis; /* for Firefox,moz

table表格中 ,点击checkbox 的value值 相加

<!DOCTYPE html> <html> <head> <title>简单的行列相加求和处理</title> <script src="assets/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // 横向初始值 var

vue,elementui——table表格中的:formatter属性

:formatter 常用来格式化内容 Function(row, column, cellValue, index) 使用: <el-table-column label="发布时间" prop="createTime" :formatter="dateFormat"></el-table-column> script 导入moment并定义: import moment from 'moment' export def

asp.net table表格表头及列固定实现

在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看不见了,于是需求就出来了,就是需要固定table的表头和列. demo结构如下图所示: demo下载地址:http://download.csdn.net/detail/taomanman/9124949 示例运行效果如下图所示: 版权声明:本文为博主原创文章,未经博主允许不得转载.

设计table表格,用js设计偶数行和奇数行显示不同的颜色

第一种:鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 function changeOver(elementId){ 8 //声明指定相关表元素

bootstrap-面板中嵌套表格

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>面板--面板中嵌套表格</title>     <!-- 最新版本的