T-DOC
  • Laravel-11
  • Laravel-10
  • Laravel-6X
  • Laravel-5.5
Dcat-Admin
  • Yii2
  • 重构2
  • Laravel-11
  • Laravel-10
  • Laravel-6X
  • Laravel-5.5
Dcat-Admin
  • Yii2
  • 重构2
  • 入门

    • 简介
    • 安装
    • 1.x升级指南
    • 版本升级
    • 快速开始
    • 开发前必读
    • 主题与颜色
    • 静态资源
    • 视图与自定义页面
    • 多应用 (多后台)
    • JS组件
    • 常见问题
    • Laravel Octane
  • 数据表格

    • 基本使用
    • 列的使用和扩展
    • 列的显示和扩展
    • 行的使用和扩展
    • 工具栏
    • 树状表格
    • 组合表头
    • 数据来源以及查询条件
    • 关联关系
    • 查询过滤
    • 列过滤器
    • 快捷搜索
    • 规格筛选器
    • 数据导出
    • 快捷创建
    • 行内编辑
    • 事件
    • 字段翻译
    • 数据软删除
    • 头部和脚部
    • 异步渲染
  • 数据表单

    • 基本使用
    • 图片/文件上传
    • 字段的使用
    • 字段扩展
    • 数据源
    • 表单弹窗
    • 关联关系
    • JSON表单
    • 分步表单
    • 表单验证
    • 工具表单
    • 事件以及表单响应
    • 初始化
    • 表单布局
    • 字段翻译
    • 字段动态显示
  • 数据详情

    • 基本使用
    • 字段显示
    • 关联关系
    • 字段显示扩展
    • 初始化
    • 字段翻译
  • 模型树

    • 基本使用
  • 数据仓库

    • 基本使用
  • 动作

    • 基本使用
    • 数据表格
    • 数据表单
    • 数据详情
    • 模型树
  • 多语言

    • 基本使用
  • 开发扩展

    • 扩展基本使用
    • 开发扩展
  • 页面组件

    • 异步加载
    • 图表
    • 数据统计卡片
    • 模态窗 (Modal)
    • 工具表单
    • 下拉菜单
    • 单/复选框
    • 选项卡
    • 警告框
    • 提示窗
    • Markdown
    • 卡片
  • 区块 (section)

    • 区块基本使用
  • 动作以及表单响应

    • 动作以及表单响应
  • 权限控制

    • 权限控制
  • 菜单

    • 菜单基本使用
  • 帮助函数

    • 帮助函数
  • 开发工具

    • 基本使用
  • 自定义登陆认证

    • 自定义登录
  • 自定义头部导航

    • 自定义头部导航条
  • 更新日志

    • BETA版本更新日志
    • 更新日志

行的使用和扩展

Dcat Admin 中文文档 /

行的使用和扩展

启用或禁用默认操作按钮

model-grid默认有四个行操作编辑、快捷编辑、删除和详情,可以通过下面的方式关闭它们:

use Dcat\Admin\Grid;

 $grid->actions(function (Grid\Displayers\Actions $actions) {
    $actions->disableDelete();
    $actions->disableEdit();
    $actions->disableQuickEdit();
    $actions->disableView();
});

// 也可以通过以下方式启用或禁用按钮
$grid->disableDeleteButton();
$grid->disableEditButton();
$grid->disableQuickEditButton();
$grid->disableViewButton();

切换行操作按钮显示方式

全局默认的行操作按钮显示方式可以通过配置参数admin.grid.grid_action_class参数进行配置,目前支持的行操作按钮显示方式有以下两种:

  • Dcat\Admin\Grid\Displayers\DropdownActions 下拉菜单方式
  • Dcat\Admin\Grid\Displayers\Actions 图标展开方式
  • Dcat\Admin\Grid\Displayers\ContextMenuActions 鼠标右键显示下拉菜单 (Since v1.4.5)
    ...

    'grid' => [

        /*
        |--------------------------------------------------------------------------
        | The global Grid action display class.
        |--------------------------------------------------------------------------
        */
        'grid_action_class' => Dcat\Admin\Grid\Displayers\DropdownActions::class,
    ],

    ...

在控制器中切换显示方式

use Dcat\Admin\Grid;

public function grid()
{
    return Grid(new Model(), function (Grid $grid) {
        $grid->setActionClass(Grid\Displayers\Actions::class);

        ...
    });
}

获取行序号 (index)

序号从 0 开始计算

// 在 display 回调中使用
$grid->column('序号')->display(function () {
    return $this->_index + 1;
});


// 在行操作 action 中使用
$grid->actions(function ($actions) {
    $index = $this->_index;

    ...
});

获取当前行数据

可以通过传入的$actions参数来获取当前行的数据:

use Dcat\Admin\Grid;

$grid->actions(function (Grid\Displayers\Actions $actions) {
    // 当前行的数据数组
    $rowArray = $actions->row->toArray();

    // 当前行的某个字段的数据
    $email = $actions->row->email;

    // 获取当前行主键值
    $id = $actions->getKey();
});

添加自定义按钮

如果有自定义的操作按钮,可以通过下面的方式添加:

use Dcat\Admin\Grid;

$grid->actions(function (Grid\Displayers\Actions $actions) {
    // append一个操作
    $actions->append('<a href=""><i class="fa fa-eye"></i></a>');

    // prepend一个操作
    $actions->prepend('<a href=""><i class="fa fa-paper-plane"></i></a>');
});

添加复杂操作按钮

如果有比较复杂的操作,可以参考下面的方式:

先定义行操作类继承Dcat\Admin\Grid\RowAction

{tip} 动作类更详细的用法,请参考动作基本使用以及数据表格动作。

<?php

namespace App\Admin\Extensions;

use Dcat\Admin\Grid\RowAction;

class CheckRow extends RowAction
{
    /**
     * 返回字段标题
     * 
     * @return string
     */
    public function title()
    {
        return 'Check row';
    }

    /**
     * 添加JS
     * 
     * @return string
     */
    protected function script()
    {
        return <<<JS
$('.grid-check-row').on('click', function () {

    // Your code.
    console.log($(this).data('id'));

});
JS;
    }

    public function html()
    {
        // 获取当前行数据ID
        $id = $this->getKey();

        // 获取当前行数据的用户名
        $username = $this->row->username;

        // 这里需要添加一个class, 和上面script方法对应
        $this->setHtmlAttribute(['data-id' => $id, 'email' => $username, 'class' => 'grid-check-row']);

        return parent::html();
    }
}

然后添加操作:

$grid->actions(new CheckRow());

// 也可以通过这种方式添加
$grid->actions(function (Grid\Displayers\Actions $actions) {
    $actions->append(new CheckRow());
});

操作按钮需要与API交互

如果你的操作类需要与后台接口交互,则可以在你的操作类中加上handle方法,这样就可以很方便的在同一个类里面处理完所有逻辑

{tip} 动作类更详细的用法,请参考动作基本使用以及数据表格动作。

<?php

namespace App\Admin\RowActions;

use Dcat\Admin\Grid\RowAction;
use Illuminate\Http\Request;
use Illuminate\Database\Eloquent\Model;

class Copy extends RowAction
{
    protected $model;

    public function __construct(string $model = null)
    {
        $this->model = $model;
    }

    /**
     * 标题
     *
     * @return string
     */
    public function title()
    {
        return 'Copy';
    }

    /**
     * 设置确认弹窗信息,如果返回空值,则不会弹出弹窗
     *
     * 允许返回字符串或数组类型
     *
     * @return array|string|void
     */
    public function confirm()
    {
        return [
            // 确认弹窗 title
            "您确定要复制这行数据吗?",
            // 确认弹窗 content
            $this->row->username,
        ];
    }

    /**
     * 处理请求
     *
     * @param Request $request
     *
     * @return \Dcat\Admin\Actions\Response
     */
    public function handle(Request $request)
    {
        // 获取当前行ID
        $id = $this->getKey();

        // 获取 parameters 方法传递的参数
        $username = $request->get('username');
        $model = $request->get('model');

        // 复制数据
        $model::find($id)->replicate()->save();

        // 返回响应结果并刷新页面
        return $this->response()->success("复制成功: [{$username}]")->refresh();
    }

    /**
     * 设置要POST到接口的数据
     *
     * @return array
     */
    public function parameters()
    {
        return [
            // 发送当前行 username 字段数据到接口
            'username' => $this->row->username,
            // 把模型类名传递到接口
            'model' => $this->model,
        ];
    }
}

使用

use App\Models\User;

$grid->actions([new Copy(User::class)]);

// 也可以通过这种方式添加
$grid->actions(function (Grid\Displayers\Actions $actions) {
    $actions->append(new Copy(User::class));
});

表单弹窗

请参考文档工具表单 - 弹窗

Last Updated:
Contributors: Hans
Prev
列的显示和扩展
Next
工具栏