fastadmin如何添加toolbar按钮和行按钮

1. 添加顶部Toolbar按钮

方法一：使用FastAdmin内置方法

<div id="toolbar" class="toolbar">
    {:build_toolbar('refresh,add,edit,del')}
    <!-- 添加自定义按钮 -->
    <a href="javascript:;" class="btn btn-success btn-export" title="导出">
        <i class="fa fa-download"></i> 导出
    </a>
    <a href="javascript:;" class="btn btn-warning btn-batch" title="批量操作">
        <i class="fa fa-cogs"></i> 批量操作
    </a>
</div>

方法二：完全自定义

<div id="toolbar" class="toolbar">
    <div class="btn-group">
        <a href="javascript:;" class="btn btn-primary btn-add">
            <i class="fa fa-plus"></i> 添加
        </a>
        <a href="javascript:;" class="btn btn-danger btn-del">
            <i class="fa fa-trash"></i> 删除
        </a>
        <a href="javascript:;" class="btn btn-success btn-refresh">
            <i class="fa fa-refresh"></i> 刷新
        </a>
        <a href="javascript:;" class="btn btn-info btn-export">
            <i class="fa fa-download"></i> 导出
        </a>
    </div>
</div>

绑定事件方法一：直接绑定

// 刷新按钮
$('.btn-refresh').click(function () {
    table.bootstrapTable('refresh');
});

// 添加按钮
$('.btn-add').click(function () {
    Fast.api.open("{:url('wanlshop/auth/earnestRecordAdd', ['user_id' => $Request.get.user_id])}", "添加记录", {
        callback: function(data) {
            // 添加成功后的回调
            table.bootstrapTable('refresh');
            Layer.msg('添加成功');
        }
    });
});

// 导出按钮
$('.btn-export').click(function () {
    // 获取当前查询参数
    var params = table.bootstrapTable('getOptions');
    var url = "{:url('wanlshop/auth/earnestRecordExport', ['user_id' => $Request.get.user_id])}" + 
              "?order=" + params.sortOrder + "&sort=" + params.sortName;
    
    window.location.href = url;
});

// 批量操作按钮
$('.btn-batch').click(function () {
    var selected = table.bootstrapTable('getSelections');
    if (selected.length === 0) {
        Layer.msg('请选择要操作的记录');
        return;
    }
    
    var ids = selected.map(function(item) {
        return item.id;
    }).join(',');
    
    // 执行批量操作
    Fast.api.ajax({
        url: "{:url('wanlshop/auth/earnestRecordBatch')}",
        data: {ids: ids, action: 'batch_operation'}
    }, function(data) {
        table.bootstrapTable('refresh');
        Layer.msg('批量操作成功');
    });
});

绑定事件方法二：使用事件委托（推荐）

// 绑定toolbar按钮事件
$('#toolbar').on('click', '.btn-refresh', function() {
    table.bootstrapTable('refresh');
}).on('click', '.btn-add', function() {
    Fast.api.open("{:url('wanlshop/auth/earnestRecordAdd', ['user_id' => $Request.get.user_id])}", "添加记录", {
        callback: function(data) {
            table.bootstrapTable('refresh');
        }
    });
}).on('click', '.btn-export', function() {
    // 导出逻辑
    window.location.href = "{:url('wanlshop/auth/earnestRecordExport', ['user_id' => $Request.get.user_id])}";
}).on('click', '.btn-batch', function() {
    // 批量操作逻辑
    Layer.msg('批量操作功能');
});

2. 添加行操作按钮

在columns配置中添加操作列

columns: [
    {field: 'id', title: 'ID', sortable: true},
    {field: 'nickname', title: '用户昵称'},
    {field: 'mobile', title: '手机号'},
    {
        field: 'money', 
        title: '金额', 
        formatter: function (value) {
            return '¥' + parseFloat(value).toFixed(2);
        }
    },
    {field: 'dateTime', title: '记录时间', sortable: true},
    {field: 'remark', title: '备注'},
    {
        field: 'operate',
        title: '操作',
        align: 'center',
        formatter: function (value, row, index) {
            var buttons = [];
            
            // 编辑按钮
            buttons.push('<a href="javascript:;" class="btn btn-xs btn-primary btn-edit" data-id="' + row.id + '" title="编辑">' +
                '<i class="fa fa-edit"></i> 编辑</a>');
            
            // 删除按钮
            buttons.push('<a href="javascript:;" class="btn btn-xs btn-danger btn-del" data-id="' + row.id + '" title="删除">' +
                '<i class="fa fa-trash"></i> 删除</a>');
            
            // 查看详情按钮
            buttons.push('<a href="javascript:;" class="btn btn-xs btn-info btn-view" data-id="' + row.id + '" title="查看">' +
                '<i class="fa fa-eye"></i> 查看</a>');
            
            return buttons.join(' ');
        }
    }
]

行操作按钮事件方法一：事件委托（推荐）

// 绑定行操作按钮事件
$(document).on('click', '.btn-edit', function () {
    var id = $(this).data('id');
    var row = table.bootstrapTable('getRowByUniqueId', id);
    
    Fast.api.open("{:url('wanlshop/auth/earnestRecordEdit')}?id=" + id, "编辑记录", {
        callback: function(data) {
            table.bootstrapTable('refresh');
            Layer.msg('编辑成功');
        }
    });
}).on('click', '.btn-del', function () {
    var id = $(this).data('id');
    var row = table.bootstrapTable('getRowByUniqueId', id);
    
    Layer.confirm('确定要删除这条记录吗？', function(index) {
        Fast.api.ajax({
            url: "{:url('wanlshop/auth/earnestRecordDel')}",
            data: {ids: id}
        }, function(data) {
            table.bootstrapTable('refresh');
            Layer.close(index);
            Layer.msg('删除成功');
        });
    });
}).on('click', '.btn-view', function () {
    var id = $(this).data('id');
    var row = table.bootstrapTable('getRowByUniqueId', id);
    
    Fast.api.open("{:url('wanlshop/auth/earnestRecordView')}?id=" + id, "查看详情 - " + row.nickname);
}).on('click', '.btn-audit', function () {
    var id = $(this).data('id');
    var row = table.bootstrapTable('getRowByUniqueId', id);
    
    Layer.confirm('确定要审核通过这条记录吗？', function(index) {
        Fast.api.ajax({
            url: "{:url('wanlshop/auth/earnestRecordAudit')}",
            data: {id: id, status: 'passed'}
        }, function(data) {
            table.bootstrapTable('refresh');
            Layer.close(index);
            Layer.msg('审核成功');
        });
    });
});

行操作按钮事件方法二：使用bootstrap-table的事件

// 在表格初始化时添加事件
table.bootstrapTable({
    // ... 其他配置
    onPostBody: function() {
        // 表格数据加载完成后执行
        $('.btn-custom').off('click').on('click', function() {
            var id = $(this).data('id');
            // 自定义操作
        });
    }
});

3. 完整示例代码完整示例代码（无事件）

<div class="panel panel-default">
    <div class="panel-heading">
        <!--{:build_heading(null, false)}-->
    </div>
    <div class="panel-body">
        <div id="toolbar" class="toolbar">
            {:build_toolbar('refresh,add')}
            <!-- 自定义按钮 -->
            <a href="javascript:;" class="btn btn-success btn-export">
                <i class="fa fa-download"></i> 导出
            </a>
            <a href="javascript:;" class="btn btn-warning btn-batch">
                <i class="fa fa-cogs"></i> 批量操作
            </a>
        </div>
        <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
        </table>
    </div>
</div>

<script>
    $(function () {
        var table = $("#table");

        // 初始化表格
        table.bootstrapTable({
            url: "{:url('wanlshop/auth/earnestRecord', ['user_id' => $Request.get.user_id])}",
            toolbar: '#toolbar',
            pk: 'id',
            sortName: 'id',
            sortOrder: 'desc',
            pagination: true,
            sidePagination: 'server',
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            search: false,
            showRefresh: false,
            columns: [
                {field: 'id', title: 'ID', sortable: true},
                {field: 'nickname', title: '用户昵称'},
                {field: 'mobile', title: '手机号'},
                {
                    field: 'money', 
                    title: '金额', 
                    formatter: function (value) {
                        return '¥' + parseFloat(value).toFixed(2);
                    }
                },
                {field: 'dateTime', title: '记录时间', sortable: true},
                {field: 'remark', title: '备注'},
                {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    width: '200px',
                    formatter: function (value, row, index) {
                        var buttons = [];
                        
                        // 编辑按钮
                        buttons.push('<a href="javascript:;" class="btn btn-xs btn-primary btn-edit" data-id="' + row.id + '" title="编辑">' +
                            '<i class="fa fa-edit"></i> 编辑</a>');
                        
                        // 删除按钮
                        buttons.push('<a href="javascript:;" class="btn btn-xs btn-danger btn-del" data-id="' + row.id + '" title="删除">' +
                            '<i class="fa fa-trash"></i> 删除</a>');
                        
                        // 查看详情按钮
                        buttons.push('<a href="javascript:;" class="btn btn-xs btn-info btn-view" data-id="' + row.id + '" title="查看">' +
                            '<i class="fa fa-eye"></i> 查看</a>');
                        
                        return buttons.join(' ');
                    }
                }
            ]
        });

        // 绑定刷新事件
        $('.btn-refresh').click(function () {
            table.bootstrapTable('refresh');
        });

        // 绑定添加事件
        $('.btn-add').click(function () {
            // 这里写添加操作的代码
            Fast.api.open("{:url('wanlshop/auth/earnestRecordAdd', ['user_id' => $Request.get.user_id])}", "添加记录", {
                callback: function(data) {
                    table.bootstrapTable('refresh');
                }
            });
        });

        // 绑定导出事件
        $('.btn-export').click(function () {
            // 导出逻辑
            window.location.href = "{:url('wanlshop/auth/earnestRecordExport', ['user_id' => $Request.get.user_id])}";
        });

        // 绑定行操作事件 - 使用事件委托
        $(document).on('click', '.btn-edit', function () {
            var id = $(this).data('id');
            Fast.api.open("{:url('wanlshop/auth/earnestRecordEdit')}?id=" + id, "编辑记录", {
                callback: function(data) {
                    table.bootstrapTable('refresh');
                }
            });
        });

        $(document).on('click', '.btn-del', function () {
            var id = $(this).data('id');
            Layer.confirm('确定要删除这条记录吗？', function(index) {
                Fast.api.ajax({
                    url: "{:url('wanlshop/auth/earnestRecordDel')}",
                    data: {ids: id}
                }, function(data) {
                    table.bootstrapTable('refresh');
                    Layer.close(index);
                });
            });
        });

        $(document).on('click', '.btn-view', function () {
            var id = $(this).data('id');
            Fast.api.open("{:url('wanlshop/auth/earnestRecordView')}?id=" + id, "查看详情");
        });
    });
</script>

完整的事件处理示例（含事件）

$(function () {
    var table = $("#table");

    // 初始化表格
    table.bootstrapTable({
        url: "{:url('wanlshop/auth/earnestRecord', ['user_id' => $Request.get.user_id])}",
        toolbar: '#toolbar',
        pk: 'id',
        sortName: 'id',
        sortOrder: 'desc',
        pagination: true,
        sidePagination: 'server',
        search: false,
        showRefresh: false,
        columns: [
            {field: 'id', title: 'ID', sortable: true},
            {field: 'nickname', title: '用户昵称'},
            {field: 'mobile', title: '手机号'},
            {
                field: 'money', 
                title: '金额', 
                formatter: function (value) {
                    return '¥' + parseFloat(value).toFixed(2);
                }
            },
            {field: 'dateTime', title: '记录时间', sortable: true},
            {field: 'remark', title: '备注'},
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                width: '250px',
                formatter: function (value, row, index) {
                    var buttons = [];
                    
                    // 查看按钮
                    buttons.push('<a href="javascript:;" class="btn btn-xs btn-info btn-view" data-id="' + row.id + '" title="查看">' +
                        '<i class="fa fa-eye"></i></a>');
                    
                    // 编辑按钮
                    buttons.push('<a href="javascript:;" class="btn btn-xs btn-primary btn-edit" data-id="' + row.id + '" title="编辑">' +
                        '<i class="fa fa-edit"></i></a>');
                    
                    // 删除按钮
                    buttons.push('<a href="javascript:;" class="btn btn-xs btn-danger btn-del" data-id="' + row.id + '" title="删除">' +
                        '<i class="fa fa-trash"></i></a>');
                    
                    // 根据状态显示不同按钮
                    if (row.status == 0) {
                        buttons.push('<a href="javascript:;" class="btn btn-xs btn-success btn-audit" data-id="' + row.id + '" title="审核">' +
                            '<i class="fa fa-check"></i></a>');
                    }
                    
                    return buttons.join(' ');
                }
            }
        ]
    });

    // ========== 顶部Toolbar按钮事件 ==========
    
    // 刷新
    $('#toolbar').on('click', '.btn-refresh', function() {
        table.bootstrapTable('refresh');
        Layer.msg('刷新成功');
    });
    
    // 添加
    $('#toolbar').on('click', '.btn-add', function() {
        Fast.api.open("{:url('wanlshop/auth/earnestRecordAdd', ['user_id' => $Request.get.user_id])}", "添加保证金记录", {
            area: ['800px', '600px'],
            callback: function(data) {
                if (data && data.code === 1) {
                    table.bootstrapTable('refresh');
                    Layer.msg('添加成功');
                }
            }
        });
    });
    
    // 导出
    $('#toolbar').on('click', '.btn-export', function() {
        var params = table.bootstrapTable('getOptions');
        var url = "{:url('wanlshop/auth/earnestRecordExport', ['user_id' => $Request.get.user_id])}" + 
                  "?order=" + params.sortOrder + "&sort=" + params.sortName;
        
        // 添加搜索条件
        var searchText = $('.search-input').val();
        if (searchText) {
            url += "&search=" + encodeURIComponent(searchText);
        }
        
        window.location.href = url;
    });
    
    // 批量删除
    $('#toolbar').on('click', '.btn-batch-del', function() {
        var selected = table.bootstrapTable('getSelections');
        if (selected.length === 0) {
            Layer.msg('请选择要删除的记录');
            return;
        }
        
        var ids = selected.map(function(item) {
            return item.id;
        }).join(',');
        
        Layer.confirm('确定要删除选中的 ' + selected.length + ' 条记录吗？', function(index) {
            Fast.api.ajax({
                url: "{:url('wanlshop/auth/earnestRecordDel')}",
                data: {ids: ids}
            }, function(data) {
                table.bootstrapTable('refresh');
                Layer.close(index);
                Layer.msg('删除成功');
            });
        });
    });

    // ========== 行操作按钮事件 ==========
    
    // 查看详情
    $(document).on('click', '.btn-view', function() {
        var id = $(this).data('id');
        var row = table.bootstrapTable('getRowByUniqueId', id);
        
        Fast.api.open("{:url('wanlshop/auth/earnestRecordView')}?id=" + id, "查看详情 - " + row.nickname, {
            area: ['900px', '700px']
        });
    });
    
    // 编辑
    $(document).on('click', '.btn-edit', function() {
        var id = $(this).data('id');
        var row = table.bootstrapTable('getRowByUniqueId', id);
        
        Fast.api.open("{:url('wanlshop/auth/earnestRecordEdit')}?id=" + id, "编辑记录 - " + row.nickname, {
            area: ['800px', '600px'],
            callback: function(data) {
                if (data && data.code === 1) {
                    table.bootstrapTable('refresh');
                    Layer.msg('编辑成功');
                }
            }
        });
    });
    
    // 删除
    $(document).on('click', '.btn-del', function() {
        var id = $(this).data('id');
        var row = table.bootstrapTable('getRowByUniqueId', id);
        
        Layer.confirm('确定要删除 ' + row.nickname + ' 的这条记录吗？', function(index) {
            Fast.api.ajax({
                url: "{:url('wanlshop/auth/earnestRecordDel')}",
                data: {ids: id}
            }, function(data) {
                table.bootstrapTable('refresh');
                Layer.close(index);
                Layer.msg('删除成功');
            });
        });
    });
    
    // 审核
    $(document).on('click', '.btn-audit', function() {
        var id = $(this).data('id');
        var row = table.bootstrapTable('getRowByUniqueId', id);
        
        Layer.confirm('确定要审核通过 ' + row.nickname + ' 的这条记录吗？', function(index) {
            Fast.api.ajax({
                url: "{:url('wanlshop/auth/earnestRecordAudit')}",
                data: {id: id, status: 'passed'}
            }, function(data) {
                table.bootstrapTable('refresh');
                Layer.close(index);
                Layer.msg('审核成功');
            });
        });
    });

    // ========== 表格其他事件 ==========
    
    // 行点击事件
    table.on('click-row.bs.table', function (e, row, $element) {
        // 移除其他行的选中样式
        $('.table tr').removeClass('active');
        // 添加当前行的选中样式
        $element.addClass('active');
    });
    
    // 加载成功事件
    table.on('load-success.bs.table', function (e, data) {
        console.log('数据加载成功', data);
    });
    
    // 加载失败事件
    table.on('load-error.bs.table', function (e, status) {
        Layer.msg('数据加载失败: ' + status);
    });
});