1.弹窗页面大小
<div id="toolbar" class="toolbar">
<a data-area='["90%","80%"]'>edit</a>
</div>
2.多选
table.bootstrapTable({
columns:[
[ {field: 'state', checkbox: true,width:40},]
]
})
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table post-body.bs.table' ,function(){
//根据绑定在标签中的自定义属性,来获取当前的index
var now_index = $(this).attr('data-index')
})
var selectedIds = Table.api.selectedids(table, true) //id集合
var selectedData = Table.api.selecteddata(table, true) //数据集合
- 实例:选中0个或多个多选框后,禁用toolbar中的按钮
<!-- btn-disabled 表明未选中任何多选框时则禁用 这个逻辑由底层提供 -->
<a href="javascript:;" class="btn btn-disabled disabled some-btn" title="按钮">按钮</a>
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table post-body.bs.table' ,function(){
//获取多选框勾选的数量
var selected_num = Table.api.selectedids(table, true).length
// Bootstrap-table的父元素,包含table,toolbar,pagnation
var parenttable = table.closest('.bootstrap-table')
// Bootstrap-table配置
var options = table.bootstrapTable('getOptions')
// Bootstrap操作区
var toolbar = $(options.toolbar, parenttable)
//勾选数量 > 1 则禁用按钮
if (options.selectedIds.length > 1) {
$(".some-btn", toolbar).addClass('disabled');
}
})