模型树

可以通过model-tree来实现一个树状组件,可以用拖拽的方式实现数据的层级、排序等操作,下面是基本的用法.

表结构和模型

要使用model-tree,要遵守约定的表结构:

  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_idordertitle,其它字段没有要求。

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

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

表结构中的三个字段parent_idordertitle的字段名也是可以修改的:

  1. <?php
  2. namespace App\Models\Demo;
  3. use Encore\Admin\Traits\AdminBuilder;
  4. use Encore\Admin\Traits\ModelTree;
  5. use Illuminate\Database\Eloquent\Model;
  6. class Category extends Model
  7. {
  8. use ModelTree, AdminBuilder;
  9. protected $table = 'demo_categories';
  10. public function __construct(array $attributes = [])
  11. {
  12. parent::__construct($attributes);
  13. $this->setParentColumn('pid');
  14. $this->setOrderColumn('sort');
  15. $this->setTitleColumn('name');
  16. }
  17. }

使用方法

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

  1. <?php
  2. namespace App\Admin\Controllers\Demo;
  3. use App\Http\Controllers\Controller;
  4. use App\Models\Category;
  5. use Encore\Admin\Form;
  6. use Encore\Admin\Facades\Admin;
  7. use Encore\Admin\Layout\Content;
  8. use Encore\Admin\Controllers\ModelForm;
  9. use Encore\Admin\Tree;
  10. class CategoryController extends Controller
  11. {
  12. use ModelForm;
  13. public function index()
  14. {
  15. return Admin::content(function (Content $content) {
  16. $content->header('树状模型');
  17. $content->body(Category::tree());
  18. });
  19. }
  20. }

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

Category::tree(function ($tree) {
    $tree->branch(function ($branch) {
        $src = config('admin.upload.host') . '/' . $branch['logo'] ;
        $logo = "<img src='$src' style='max-width:30px;max-height:30px' class='img'/>";

        return "{$branch['id']} - {$branch['title']} $logo";
    });
})

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

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


Category::tree(function ($tree) {

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

})