列操作

model-grid内置了很多对于列的操作方法，可以通过这些方法很灵活的操作列数据。

Encore\Admin\Grid\Column对象内置了display()方法来通过传入的回调函数来处理当前列的值，

  1. $grid->column('title')->display(function ($title) {
  3.     return "<span style='color:blue'>$title</span>";
  5. });

在传入的匿名函数中可以通过任何方式对数据进行处理，另外匿名函数绑定了当前列的数据作为父对象，可以在函数中调用当前行的数据：

  2. $grid->first_name();
  4. $grid->last_name();
  6. // 不存在的`full_name`字段
  7. $grid->column('full_name')->display(function () {
  8.     return $this->first_name . ' ' . $this->last_name;
  9. });

value()方法作为display()方法的别名存在

内置方法

model-grid内置了若干方法来帮助你扩展列功能

editable

通过editable.js的帮助，可以让你在表格中直接编辑数据，使用方法如下

  1. $grid->title()->editable();
  3. $grid->title()->editable('textarea');
  5. $grid->title()->editable('select', [1 => 'option1', 2 => 'option2', 3 => 'option3']);
  7. // select 支持传递闭包作为参数，该闭包接收参数为当前行对应的模型
  8. $grid->title()->editable('select', function($row) {
  9.     if ($row->title === 'test') {
  10.         return ['test1', 'test2'];
  11.     }
  12.     return ['test3', 'test4'];
  13. });
  15. $grid->birth()->editable('date');
  17. $grid->published_at()->editable('datetime');
  19. $grid->column('year')->editable('year');
  21. $grid->column('month')->editable('month');
  23. $grid->column('day')->editable('day');

switch

注意：在grid中对某字段设置了switch，同时需要在form里面对该字段设置同样的switch

快速将列变成开关组件，使用方法如下：

  1. $grid->status()->switch();
  3. // 设置text、color、和存储值
  4. $states = [
  5.     'on'  => ['value' => 1, 'text' => '打开', 'color' => 'primary'],
  6.     'off' => ['value' => 2, 'text' => '关闭', 'color' => 'default'],
  7. ];
  8. $grid->status()->switch($states);

switchGroup

注意：在grid中对某些字段设置了switch，同时需要在form里面对这些字段设置同样的switch

快速将列变成开关组件组，使用方法如下：

  1. $states = [
  2.     'on' => ['text' => 'YES'],
  3.     'off' => ['text' => 'NO'],
  4. ];
  6. $grid->column('switch_group')->switchGroup([
  7.     'hot'        => '热门',
  8.     'new'        => '最新',
  9.     'recommend'  => '推荐',
  10.     'image.show' => '显示图片', // 更新对应关联模型
  11. ], $states);

select

  1. $grid->options()->select([
  2.     1 => 'Sed ut perspiciatis unde omni',
  3.     2 => 'voluptatem accusantium doloremque',
  4.     3 => 'dicta sunt explicabo',
  5.     4 => 'laudantium, totam rem aperiam',
  6. ]);

select 也支持参数为闭包，使用方法和editable的select类似。

radio

  1. $grid->options()->radio([
  2.     1 => 'Sed ut perspiciatis unde omni',
  3.     2 => 'voluptatem accusantium doloremque',
  4.     3 => 'dicta sunt explicabo',
  5.     4 => 'laudantium, totam rem aperiam',
  6. ]);

radio 也支持参数为闭包，使用方法和editable的select类似。

checkbox

  1. $grid->options()->checkbox([
  2.     1 => 'Sed ut perspiciatis unde omni',
  3.     2 => 'voluptatem accusantium doloremque',
  4.     3 => 'dicta sunt explicabo',
  5.     4 => 'laudantium, totam rem aperiam',
  6. ]);

checkbox 也支持参数为闭包，使用方法和editable的select类似。

image

  1. $grid->picture()->image();
  3. //设置服务器和宽高
  4. $grid->picture()->image('http://xxx.com', 100, 100);
  6. // 显示多图
  7. $grid->pictures()->display(function ($pictures) {
  9.     return json_decode($pictures, true);
  11. })->image('http://xxx.com', 100, 100);

label

  1. $grid->name()->label();
  3. //设置颜色，默认`success`,可选`danger`、`warning`、`info`、`primary`、`default`、`success`
  4. $grid->name()->label('danger');
  6. // 接收数组
  7. $grid->keywords()->label();

badge

  1. $grid->name()->badge();
  3. //设置颜色，默认`success`,可选`danger`、`warning`、`info`、`primary`、`default`、`success`
  4. $grid->name()->badge('danger');
  6. // 接收数组
  7. $grid->keywords()->badge();

扩展列功能

可以通过两种方式扩展列功能，第一种是通过匿名函数的方式。

在app/Admin/bootstrap.php加入以下代码:

  1. use Encore\Admin\Grid\Column;
  3. Column::extend('color', function ($value, $color) {
  4.     return "<span style='color: $color'>$value</span>"
  5. });

然后在model-grid中使用这个扩展：

  2. $grid->title()->color('#ccc');

如果列显示逻辑比较复杂，可以通过扩展类来实现。

扩展类app/Admin/Extensions/Popover.php:

  1. <?php
  3. namespace App\Admin\Extensions;
  5. use Encore\Admin\Admin;
  6. use Encore\Admin\Grid\Displayers\AbstractDisplayer;
  8. class Popover extends AbstractDisplayer
  9. {
  10.     public function display($placement = 'left')
  11.     {
  12.         Admin::script("$('[data-toggle=\"popover\"]').popover()");
  14.         return <<<EOT
  15. <button type="button"
  16.     class="btn btn-secondary"
  17.     title="popover"
  18.     data-container="body"
  19.     data-toggle="popover"
  20.     data-placement="$placement"
  21.     data-content="{$this->value}"
  22.     >
  23.   弹出提示
  24. </button>
  26. EOT;
  28.     }
  29. }

然后在app/Admin/bootstrap.php注册扩展类：

  1. use Encore\Admin\Grid\Column;
  2. use App\Admin\Extensions\Popover;
  4. Column::extend('popover', Popover::class);

然后就能在model-grid中使用了：

  1. $grid->desciption()->popover('right');

帮助方法

字符串操作

如果当前里的输出数据为字符串，那么可以通过链式方法调用Illuminate\Support\Str的方法。

比如有如下一列，显示title字段的字符串值:

  1. $grid->title();

在title列输出的字符串基础上调用Str::limit()方法

  1. $grid->title()->limit(30);

调用方法之后输出的还是字符串，所以可以继续调用Illuminate\Support\Str的方法：

  1. $grid->title()->limit(30)->ucfirst();
  3. $grid->title()->limit(30)->ucfirst()->substr(1, 10);

数组操作

如果当前列输出的是数组，可以直接链式调用Illuminate\Support\Collection方法。

比如tags列是从一对多关系取出来的数组数据：

  1. $grid->tags();
  3. array (
  4.   0 => 
  5.   array (
  6.     'id' => '16',
  7.     'name' => 'php',
  8.     'created_at' => '2016-11-13 14:03:03',
  9.     'updated_at' => '2016-12-25 04:29:35',
  11.   ),
  12.   1 => 
  13.   array (
  14.     'id' => '17',
  15.     'name' => 'python',
  16.     'created_at' => '2016-11-13 14:03:09',
  17.     'updated_at' => '2016-12-25 04:30:27',
  18.   ),
  19. )

调用Collection::pluck()方法取出数组的中的name列

  1. $grid->tags()->pluck('name');
  3. array (
  4.     0 => 'php',
  5.     1 => 'python',
  6.   ),

取出name列之后输出的还是数组，还能继续调用用Illuminate\Support\Collection的方法

  1. $grid->tags()->pluck('name')->map('ucwords');
  3. array (
  4.     0 => 'Php',
  5.     1 => 'Python',
  6.   ),

将数组输出为字符串

  1. $grid->tags()->pluck('name')->map('ucwords')->implode('-');
  3. "Php-Python"

混合使用

在上面两种类型的方法调用中，只要上一步输出的是确定类型的值，便可以调用类型对应的方法，所以可以很灵活的混合使用。

比如images字段是存储多图片地址数组的JSON格式字符串类型：

  2. $grid->images();
  4. "['foo.jpg', 'bar.png']"
  6. // 链式方法调用来显示多图
  7. $grid->images()->display(function ($images) {
  9.     return json_decode($images, true);
  11. })->map(function ($path) {
  13.     return 'http://localhost/images/'. $path;
  15. })->image();