bootstrap-table如何给行内添加操作函数及功能按键
来源:互联网 发布:办公软件的基础知识 编辑:程序博客网 时间:2024/06/05 17:36
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
// data:reet.data,
url:'../data/yonghuguanli.json',
// uniqueId: "SOBID",
striped:true,
pagination:true,
clickToSelect:true,
height:580,
columns: [{
checkbox:true,
},{
field: 'id',
sortable:true,
title: '组织编码',
sortable: true,
},{
field: 'name',
title: '组织名称',
sortable: true,
},{
field: 'lexing',
title: '账套编号',
sortable: true
},{
field: 'zt',
title: '账套名称',
sortable: true
}, {
field: 'operate',
title: '操作',
align: 'center',
events: "operateEvents",
formatter: operateFormatter
}],
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('');
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) {
alert("D");
}
};
$('#table').bootstrapTable({
// data:reet.data,
url:'../data/yonghuguanli.json',
// uniqueId: "SOBID",
striped:true,
pagination:true,
clickToSelect:true,
height:580,
columns: [{
checkbox:true,
},{
field: 'id',
sortable:true,
title: '组织编码',
sortable: true,
},{
field: 'name',
title: '组织名称',
sortable: true,
},{
field: 'lexing',
title: '账套编号',
sortable: true
},{
field: 'zt',
title: '账套名称',
sortable: true
}, {
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) {
alert("D");
}
};
阅读全文
0 0
- bootstrap-table如何给行内添加操作函数及功能按键
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作!
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作!
- 给Table添加行
- 脚本给TABLE 添加 删除 行的操作DEMO
- bootstrap-table 行内编辑简单实现
- bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能
- bootstrap-table 插件二次开发添加表格行新增和编辑功能
- 动态给table添加行
- SWT如何给Table添加右键菜单
- HTML如何给table添加滚动条
- HTML如何给table添加滚动条
- HTML如何给table添加滚动条
- SWT如何给Table添加右键菜单
- 基于bootstrap table分页数据及行内编辑和导出数据(一)
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- VC 给列表框添加【右键按键菜单】功能
- 如何给bootstrap table设置行列单元格样式
- Linux下安装Anaconda
- 进程 、进程组、会话、控制终端之间的关系
- openwrt下增加package 编译成新的版本
- JoinColumn详解
- Python之PyLint自动检查代码
- bootstrap-table如何给行内添加操作函数及功能按键
- Vi/Vim常用命令及一些小技巧
- 设计模式(21)-策略模式
- 同一个信念、同一个目标
- 【HDU2136】Largest prime factor
- servlet
- HUST 1017
- 设计模式之策略模式
- servlet多线程并发问题