快速搞定fastadmin表格右侧操作栏增加审核成功和审核失败按钮并提交ajax到后端

在 Fastadmin 表格中无缝添加审核成功/失败 AJAX 按钮

各位 Fastadmin 开发者，还在为在表格右侧操作栏中添加审核成功和审核失败按钮提交 AJAX 请求到后端而苦恼吗？别担心，这篇详细教程将带你轻松实现这一功能，为你的项目增添实用性和灵活性。

准备工作

• 安装 Fastadmin 框架
• 创建一个新的 Fastadmin 项目
• 创建一个新的控制器，例如 "审核控制器"

控制器代码

namespace app\admin\controller;

use app\common\controller\Backend;

class AuditController extends Backend
{
    public function success()
    {
        $id = $this->request->param('id');
        $row = \app\common\model\Model::get($id);
        $row->status = 1;
        $row->save();
        $this->success('审核成功！');
    }

    public function fail()
    {
        $id = $this->request->param('id');
        $row = \app\common\model\Model::get($id);
        $row->status = 2;
        $row->save();
        $this->success('审核失败！');
    }
}

模板代码

<script>
    $(function() {
        $('.btn-success').click(function() {
            var id = $(this).data('id');
            $.ajax({
                url: '/admin/audit/success',
                type: 'post',
                data: {id: id},
                success: function(data) {
                    alert(data.msg);
                    window.location.reload();
                }
            });
        });

        $('.btn-danger').click(function() {
            var id = $(this).data('id');
            $.ajax({
                url: '/admin/audit/fail',
                type: 'post',
                data: {id: id},
                success: function(data) {
                    alert(data.msg);
                    window.location.reload();
                }
            });
        });
    });
</script>

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($list as $row): ?>
        <tr>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['name']; ?></td>
            <td><?php echo $row['status'] == 1 ? '已审核' : '未审核'; ?></td>
            <td>
                <button class="btn btn-success btn-xs" data-id="<?php echo $row['id']; ?>">审核成功</button>
                <button class="btn btn-danger btn-xs" data-id="<?php echo $row['id']; ?>">审核失败</button>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

实现原理

上述代码片段实现了以下功能：

• 控制器代码 负责处理审核成功和失败请求，更新数据库并返回响应信息。
• 模板代码 创建了表格操作栏中的按钮，并在按钮单击事件中触发 AJAX 请求。

总结

通过集成本教程中提供的代码，你可以轻松地在 Fastadmin 表格中添加审核成功/失败按钮，并通过 AJAX 提交请求到后端，从而实现审核操作的无缝执行。这极大地提高了用户体验，使审核流程更加直观和高效。

常见问题解答

1. 为什么在点击按钮后页面会刷新？
   这是因为我们在 AJAX 请求成功后使用了 window.location.reload() 来刷新页面，以显示更新后的数据。

2. 我可以自定义审核成功和失败的消息吗？
   当然可以！在控制器代码中找到 $this->success() 和 $this->error() 方法，你可以修改这些方法中的消息参数以自定义响应消息。

3. 我还可以使用其他按钮样式吗？
   是的，你可以根据需要自定义按钮的样式。修改 .btn-success 和 .btn-danger 样式类以应用不同的外观和颜色。

4. 如何处理审核失败的情况？
   在控制器代码中，你可以使用 try-catch 块或其他错误处理机制来捕获并处理审核失败的情况，并根据需要采取适当的操作。

5. 我可以添加其他操作按钮吗？
   是的，你可以在模板代码中添加更多按钮来执行其他操作，例如编辑、删除或查看记录。