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>

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

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>