轻松搞定！FastAdmin 列表操作列按钮增减技巧大公开

前端

2023-08-19 13:05:26

使用 FastAdmin 创建交互式表格列表：添加按钮和控制显示

准备工作

在使用 FastAdmin 为表格列表添加按钮和控制按钮显示之前，需要做好以下准备工作：

确保已安装 FastAdmin 框架。
创建一个 FastAdmin 项目。
定义一个数据模型。
创建一个控制器并定义操作方法。
在视图文件中添加列表操作列。

添加按钮

要在列表操作列中添加按钮，可以使用 addToolbarButton 方法。这个方法需要以下参数：

按钮名称（name）
按钮文本（title）
按钮图标（icon）
按钮样式（class）
按钮点击事件（click）

例如，以下代码添加了一个名为“查看”的按钮，该按钮具有绿色外观并带有查看图标：

$grid->addColumn('operate')->addToolbarButton('custom_button', '查看', 'fa fa-eye', 'btn btn-success', 'view($id)');

控制按钮显示

有时候，您可能希望根据特定条件显示或隐藏按钮。可以使用 visible 方法来实现此目的。这个方法需要一个闭包，该闭包返回一个布尔值，指示按钮是否可见。

例如，以下代码将根据 status 字段的值来控制“查看”按钮的显示：

$grid->addColumn('operate')->addToolbarButton('custom_button', '查看', 'fa fa-eye', 'btn btn-success')
    ->visible(function ($row) {
        return $row['status'] == '1';
    });

实例演示

以下是一个完整的示例，演示如何在 FastAdmin 中添加按钮和控制按钮显示：

控制器代码：

<?php

use FastAdmin\Grid;

class DemoController extends Controller
{
    public function index()
    {
        $grid = new Grid(new Model());

        $grid->addColumn('id')->sortable();
        $grid->addColumn('name');

        $grid->addColumn('operate')->addToolbarButton('edit', '编辑', 'fa fa-edit', 'btn btn-primary', 'edit($id)');
        $grid->addColumn('operate')->addToolbarButton('delete', '删除', 'fa fa-trash', 'btn btn-danger', 'delete($id)');

        $grid->addColumn('status')->switch();

        $grid->visible(function ($row) {
            return $row['status'] == '1';
        });

        return view('demo', ['grid' => $grid]);
    }

    public function edit($id)
    {
        // ...
    }

    public function delete($id)
    {
        // ...
    }
}

视图文件代码：

<?= $grid->render(); ?>

在浏览器中访问此页面后，您将看到一个表格列表，其中包含带有“查看”按钮的操作列。如果 status 字段的值为 1，则只有在该行中才会显示此按钮。

总结

通过以上步骤，您就可以轻松地在 FastAdmin 的列表操作列区域添加按钮，并控制已有按钮的显示。这些技巧可以帮助您创建更加灵活和用户友好的管理界面。

常见问题解答

如何更改按钮的颜色？
- 使用 class 参数指定按钮的样式。例如，要将按钮设为绿色，请使用 btn btn-success。
如何更改按钮图标？
- 使用 icon 参数指定按钮图标。例如，要使用眼睛图标，请使用 fa fa-eye。
如何禁用按钮？
- 在按钮样式中添加 disabled 类。例如，要禁用按钮，请使用 btn btn-default disabled。
如何为按钮添加提示文本？
- 使用 HTML title 属性添加提示文本。例如，要为按钮添加提示文本“查看详细信息”，请使用以下代码：
```
$grid->addColumn('operate')->addToolbarButton('custom_button', '查看', 'fa fa-eye', 'btn btn-success', 'view($id)', ['title' => '查看详细信息']);
```

如何在按钮点击时打开模态框？

在按钮点击事件中使用 layer.open 函数打开模态框。例如：

$grid->addColumn('operate')->addToolbarButton('custom_button', '查看', 'fa fa-eye', 'btn btn-success', 'layer.open({type: 2,title: "查看详细信息",content: "/demo/view?id=" + row.id,area: ["800px", "600px"]});');