fastadmin-表格使用

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