模型树

这个功能可以实现一个树状组件，可以用拖拽的方式实现数据的层级、排序等操作，下面是基本的用法。

模型树 - 图1

表结构和模型

要使用model-tree，要遵守约定的表结构：

{tip} parent_id字段一定要默认为0！！！

  1. CREATE TABLE `demo_categories` (
  2.   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  3.   `parent_id` int(11) NOT NULL DEFAULT '0',
  4.   `order` int(11) NOT NULL DEFAULT '0',
  5.   `title` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  6.   `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  7.   `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  8.   PRIMARY KEY (`id`)
  9. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

上面的表格结构里面有三个必要的字段parent_id、order、title,其它字段没有要求。

对应的模型为app/Models/Category.php:

  1. <?php
  3. namespace App\Models\Demo;
  5. use Dcat\Admin\Traits\ModelTree;
  6. use Illuminate\Database\Eloquent\Model;
  8. class Category extends Model
  9. {
  10.     use ModelTree;
  12.     protected $table = 'demo_categories';
  13. }

表结构中的三个字段parent_id、order、title的字段名也是可以修改的：

{tip} 为了便于阅读，这里不再展示 Repository 代码。

  1. <?php
  3. namespace App\Models\Demo;
  5. use Dcat\Admin\Traits\ModelTree;
  6. use Illuminate\Database\Eloquent\Model;
  8. class Category extends Model
  9. {
  10.     use ModelTree;
  12.     protected $table = 'demo_categories';
  14.     // 父级ID字段名称，默认值为 parent_id
  15.     protected $parentColumn = 'pid';
  17.     // 排序字段名称，默认值为 order
  18.     protected $orderColumn = 'sort';
  20.     // 标题字段名称，默认值为 title
  21.     protected $titleColumn = 'name';
  22. }

使用方法

然后就是在页面中使用model-tree了：

  1. <?php
  3. namespace App\Admin\Controllers\Demo;
  5. use App\Models\Category;
  6. use Dcat\Admin\Layout\Row;
  7. use Dcat\Admin\Layout\Content;
  8. use Dcat\Admin\Tree;
  9. use Dcat\Admin\Controllers\AdminController;
  11. class CategoryController extends AdminController
  12. {
  13.     public function index(Content $content)
  14.     {
  15.         return $content->header('树状模型')
  16.             ->body(function (Row $row) {
  17.                 $tree = new Tree(new Category);
  19.                 $row->column(12, $tree);
  20.             });
  21.     }
  22. }

可以通过下面的方式来修改行数据的显示：

  1. $tree = new Tree(new Category);
  3. $tree->branch(function ($branch) {
  4.     $src = config('admin.upload.host') . '/' . $branch['logo'] ;
  5.     $logo = "<img src='$src' style='max-width:30px;max-height:30px' class='img'/>";
  7.     return "{$branch['id']} - {$branch['title']} $logo";
  8. });

在回调函数中返回的字符串类型数据，就是在树状组件中的每一行的显示内容，$branch参数是当前行的数据数组。

如果要修改模型的查询，用下面的方式

  1. $tree->query(function ($model) {
  2.     return $model->where('type', 1);
  3. });

自定义工具栏按钮

请参考文档模型树动作