行的使用和扩展

启用或禁用默认操作按钮

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

  1. use Dcat\Admin\Grid;
  2. $grid->actions(function (Grid\Displayers\Actions $actions) {
  3. $actions->disableDelete();
  4. $actions->disableEdit();
  5. $actions->disableQuickEdit();
  6. $actions->disableView();
  7. });
  8. // 也可以通过以下方式启用或禁用按钮
  9. $grid->disableDeleteButton();
  10. $grid->disableEditButton();
  11. $grid->disableQuickEditButton();
  12. $grid->disableViewButton();

切换行操作按钮显示方式

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

  • Dcat\Admin\Grid\Displayers\DropdownActions 下拉菜单方式
  • Dcat\Admin\Grid\Displayers\Actions 图标展开方式
  • Dcat\Admin\Grid\Displayers\ContextMenuActions 鼠标右键显示下拉菜单
  1. ...
  2. 'grid' => [
  3. /*
  4. |--------------------------------------------------------------------------
  5. | The global Grid action display class.
  6. |--------------------------------------------------------------------------
  7. */
  8. 'grid_action_class' => Dcat\Admin\Grid\Displayers\DropdownActions::class,
  9. ],
  10. ...

在控制器中切换显示方式

  1. use Dcat\Admin\Grid;
  2. public function grid()
  3. {
  4. return Grid(new Model(), function (Grid $grid) {
  5. $grid->setActionClass(Grid\Displayers\Actions::class);
  6. ...
  7. });
  8. }

获取行序号 (index)

序号从 0 开始计算

  1. // 在 display 回调中使用
  2. $grid->column('序号')->display(function () {
  3. return $this->_index + 1;
  4. });
  5. // 在行操作 action 中使用
  6. $grid->actions(function ($actions) {
  7. $index = $this->_index;
  8. ...
  9. });

获取当前行数据

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

  1. use Dcat\Admin\Grid;
  2. $grid->actions(function (Grid\Displayers\Actions $actions) {
  3. // 当前行的数据数组
  4. $rowArray = $actions->row->toArray();
  5. // 当前行的某个字段的数据
  6. $email = $actions->row->email;
  7. // 获取当前行主键值
  8. $id = $actions->getKey();
  9. });

添加自定义按钮

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

  1. use Dcat\Admin\Grid;
  2. $grid->actions(function (Grid\Displayers\Actions $actions) {
  3. // append一个操作
  4. $actions->append('<a href=""><i class="fa fa-eye"></i></a>');
  5. // append一个复杂操作
  6. $actions->append(new Copy());
  7. // prepend一个操作
  8. $actions->prepend('<a href=""><i class="fa fa-paper-plane"></i></a>');
  9. }

添加复杂操作按钮

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

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

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

  1. <?php
  2. namespace App\Admin\Extensions;
  3. use Dcat\Admin\Grid\RowAction;
  4. class CheckRow extends RowAction
  5. {
  6. /**
  7. * 返回字段标题
  8. *
  9. * @return string
  10. */
  11. public function title()
  12. {
  13. return 'Check row';
  14. }
  15. /**
  16. * 添加JS
  17. *
  18. * @return string
  19. */
  20. protected function script()
  21. {
  22. return <<<JS
  23. $('.grid-check-row').on('click', function () {
  24. // Your code.
  25. console.log($(this).data('id'));
  26. });
  27. JS;
  28. }
  29. public function html()
  30. {
  31. // 获取当前行数据ID
  32. $id = $this->getKey();
  33. // 获取当前行数据的用户名
  34. $username = $this->row->username;
  35. // 这里需要添加一个class, 和上面script方法对应
  36. $this->setHtmlAttribute(['data-id' => $id, 'email' => $username, 'class' => 'grid-check-row']);
  37. return parent::html();
  38. }
  39. }

然后添加操作:

  1. $grid->actions([new CheckRow()]);
  2. // 也可以通过这种方式添加
  3. $grid->actions(function (Grid\Displayers\Actions $actions) {
  4. $actions->append(new CheckRow());
  5. }

操作按钮需要与API交互

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

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

  1. <?php
  2. namespace App\Admin\RowActions;
  3. use Dcat\Admin\Grid\RowAction;
  4. use Illuminate\Http\Request;
  5. use Illuminate\Database\Eloquent\Model;
  6. class Copy extends RowAction
  7. {
  8. protected $model;
  9. public function __construct(string $model = null)
  10. {
  11. $this->model = $model;
  12. }
  13. /**
  14. * 标题
  15. *
  16. * @return string
  17. */
  18. public function title()
  19. {
  20. return 'Copy';
  21. }
  22. /**
  23. * 设置确认弹窗信息,如果返回空值,则不会弹出弹窗
  24. *
  25. * 允许返回字符串或数组类型
  26. *
  27. * @return array|string|void
  28. */
  29. public function confirm()
  30. {
  31. return [
  32. // 确认弹窗 title
  33. "您确定要复制这行数据吗?",
  34. // 确认弹窗 content
  35. $this->row->username,
  36. ];
  37. }
  38. /**
  39. * 处理请求
  40. *
  41. * @param Request $request
  42. *
  43. * @return \Dcat\Admin\Actions\Response
  44. */
  45. public function handle(Request $request)
  46. {
  47. // 获取当前行ID
  48. $id = $this->getKey();
  49. // 获取 parameters 方法传递的参数
  50. $username = $request->get('username');
  51. $model = $request->get('model');
  52. // 复制数据
  53. $model::find($id)->replicate()->save();
  54. // 返回响应结果并刷新页面
  55. return $this->response()->success("复制成功: [{$username}]")->refresh();
  56. }
  57. /**
  58. * 设置要POST到接口的数据
  59. *
  60. * @return array
  61. */
  62. public function parameters()
  63. {
  64. return [
  65. // 发送当前行 username 字段数据到接口
  66. 'username' => $this->row->username,
  67. // 把模型类名传递到接口
  68. 'model' => $this->model,
  69. ];
  70. }
  71. }

使用

  1. use App\Models\User;
  2. $grid->actions([new Copy(User::class)]);
  3. // 也可以通过这种方式添加
  4. $grid->actions(function (Grid\Displayers\Actions $actions) {
  5. $actions->append(new Copy(User::class));
  6. }

表单弹窗

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