fastadmin后台表格使用技巧

自定义按钮打开页面的大小

extend: 'data-area=["500px","270px"]'

修改系统编辑打开的页面大小，在表格绑定事件前

table.on('post-body.bs.table',function(){
    $(".btn-editone").data("area",["500px","350px"]);
});

隐藏表格的默认搜索框

search: false,

字段不需要出现在搜索条件中

operate: false

想自定义根据参数控制 编辑/添加 按钮的显示

formatter: function(value, row, index){
    var that = $.extend({}, this);
    var table = $(that.table).clone(true);
    if (row.status != 1) {
        $(table).data("operate-edit", null);
    }
    that.table = table;
    return Table.api.formatter.operate.call(that, value, row, index);
}

自定义根据参数控制自定义按钮的显示

//显示
visible: function(row) {
    if(row.is_check == 0 && row.status == 1){
        return true;
    }
}
//隐藏
hidden: function(row) {
    if(row.is_check == 0 && row.status == 1){
        return true;
    }
}

自定义按钮想弹出提示

//加上属性
confirm: '确认首款正确吗？',
//另外按钮必须加上类
btn-ajax

自定义按钮打开页面可操作请求，并关闭页面

//按钮加上类
btn-dialog
//控制打开页面大小
extend: 'data-area=["500px","270px"]'
//好需要绑定时间，不然窗口不会关闭 refuse 为按钮的名称
refuse: function () {
    Controller.api.bindevent();
},

默认打开表格的搜索，表格绑定事件之前

$('.commonsearch-table').attr('class','commonsearch-table');

表格的其他参数控制

commonSearch: false,
visible: false,
showToggle: false,
showColumns: false,
search: false,
showExport: false,

表格渲染的同时，渲染其他的数据，或者操作dom

table.on('load-success.bs.table', function (e, data) {
    $("#income_total_price").text(data.income_total_price);
    ...
});

联动下拉框 selectpage

$("#c-contract_cate_id").data("params", function(){
    return {custom: {type: $("#c-type").val()}};
})
//示例
add: function () {
    $("#c-contract_cate_id").data("params", function(){
        return {custom: {type: $("#c-type").val()}};
    })
    Controller.api.bindevent();
},

权限控制按钮的显示隐藏

edit 和 del 是按钮的名称，前提是对应的操作权限已经加到了系统权限表中
data-operate-edit="{:$auth->check('mobile_limit/edit')}" 
data-operate-del="{:$auth->check('mobile_limit/del')}" 

标题的hover提示

data-toggle="tooltip" data-original-title="类型为收入，已付款金额相加"
//示例
<span data-toggle="tooltip" data-original-title="类型为收入，已付款金额相加">实收金额（元）</span>

自定义导出

//index.html
<a class="btn btn-info btn-myexcel-export" title="导出" href="javascript:;"><i class="fa fa-download"></i> 导出</a>

//js文件
// 自定义导出按钮
$(document).on("click", ".btn-myexcel-export", function () {
    var page = table.bootstrapTable('getData'); // 获取页面数据
    let ids = [];
    let id_data = '';
    let select_ids = [];
    let select_id_data = [];
    // 取出当前页面的id
    $.each(page,function(i,v){
        ids.push(v.id)
        if(i == 0){
                id_data = v.id;
        }else{
                id_data += ','+v.id;
        }
    })
    //选中数据
    var select = table.bootstrapTable('getSelections');
        $.each(select,function(i,v){
            select_ids.push(v.id)
                if(i == 0){
                    select_id_data = v.id;
                }else{
                    select_id_data += ','+v.id;
                }
            })
            layer.confirm("请选择导出的选项", {
            title: '导出数据',
            btn: ['全部','当前页(' + ids.length + '条)','当前选中  ('+select_ids.length+')'],
            yes: function (index, layero) {
            // 全部数据
                Layer.close(index);
                top.location.href="export?id_data="
            },
            btn2: function (index, layero) {
                // 当前页面数据
                if (id_data.length <= 0) {
                    return layer.msg('当前页没有数据');
                }
                Layer.close(index);
                top.location.href="export?id_data="+id_data
            },
            btn3: function (index, layero) {
                // 选中数据
                if (select_id_data.length <= 0) {
                    return layer.msg('没有选中数据');
                }
                Layer.close(index);
                top.location.href="export?id_data="+select_id_data
            }
    })
});