2.7 Laravel Admin树形模型树页面-分类页

最新推荐文章于 2022-07-16 10:13:56 发布
最新推荐文章于 2022-07-16 10:13:56 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： Laravel Laravel Admin 文章标签： laravel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31288929/article/details/111530967
版权 
# 表结构
# 图片分类表

CREATE TABLE `ph_images_category` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `pid` int(11) DEFAULT '0' COMMENT '父级id，0为一级分类',
  `name` varchar(20) DEFAULT NULL COMMENT '分类名称',
  `cover_url` varchar(255) DEFAULT NULL COMMENT '分类封面图片',
  `sort` smallint(5) DEFAULT '100' COMMENT '分类排序 越小越靠前',
  `created_at` timestamp NULL DEFAULT NULL COMMENT '添加时间',
  `updated_at` timestamp NULL DEFAULT NULL COMMENT '修改时间',
  `deleted_at` timestamp NULL DEFAULT NULL COMMENT '删除时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='图片分类表';

 

用到框架的 mode-tree 树形组件：https://laravel-admin.org/docs/zh/1.x/model-tree

 

 

1、创建模型、控制器、菜单

参照 2.5 节中的步骤，这里跳过

 

 

2、修改模型

组件的3个默认字段是：

parent_id   - integer

order        - integer

title        - string

 

如果和默认字段一样，可以不重新指定字段

# 修改如下
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
use DateTimeInterface;
use Encore\Admin\Traits\ModelTree;
class ImagesCategory extends Model
{
    use HasFactory;
    use SoftDeletes;
    use ModelTree; // 使用数据模型树
    // 数据库 mysql_api 中的表
    protected $connection = 'mysql_api';
    protected $table = "images_category";
    /**
     * 为数组 / JSON 序列化准备日期。
     *
     * @param  \DateTimeInterface  $date
     * @return string
     */
    protected function serializeDate(DateTimeInterface $date)
    {
        return $date->format('Y-m-d H:i:s');
    }
    /**
     * 指定数据模型数的关联字段
    */
    public function __construct(array $attributes = [])
    {
        parent::__construct($attributes);
        $this->setParentColumn('pid');
        $this->setOrderColumn('sort');
        $this->setTitleColumn('name');
    }
}

 

3、修改控制器

<?php
namespace App\Admin\Controllers;
use App\Models\ImagesCategory;
use Encore\Admin\Controllers\AdminController;
use Encore\Admin\Form;
use Encore\Admin\Grid;
use Encore\Admin\Layout\Content;
use Encore\Admin\Show;
use Encore\Admin\Tree;
use Encore\Admin\Layout\Column;
use Encore\Admin\Layout\Row;
class ImagesCategoryController extends AdminController
{
    /**
     * Title for current resource.
     *
     * @var string
     */
    protected $title = '图片分类';
    /**
     * Make a grid builder.
     *  这个没用了
     * @return Grid
     */
    protected function grid()
    {
        $grid = new Grid(new ImagesCategory());
        $grid->column('id', __('Id'));
        $grid->column('pid', __('ImagesCategoryPid'));
        $grid->column('name', __('ImagesCategoryName'));
        $grid->column('cover_url', __('Cover url'))->image('',150,150);
        $grid->column('sort', __('Sort'));
        $grid->column('created_at', __('Created at'));
        $grid->column('updated_at', __('Updated at'));
        $grid->column('deleted_at', __('Deleted at'));
        $grid->filter(function ($filter) {
            // 范围过滤器，调用模型的`onlyTrashed`方法，查询出被软删除的数据。
            $filter->scope('trashed', '回收站')->onlyTrashed();
        });
        return $grid;
    }
    /**
     * Index interface.
     * 这里重写首页实现树状结构
     *
     * @return Content
     */
    public function index(Content $content)
    {
        return $content
            ->header($this->title)
            ->description('列表')->row(function (Row $row) {
                // 左侧显示树形分类
                $tree = new Tree(new ImagesCategory());
                $tree->disableCreate();// 禁用新增按钮
                // 修改返回结构
                $tree->branch(function ($branch) {
                    if ($branch['cover_url']){
                        $src = config('filesystems.disks.admin.url') . '/' . $branch['cover_url'] ;
                        $logo = "<img src='$src' style='max-width:30px;max-height:30px;border-radius: 100%;' class='img'/>";
                    }else{
                        $logo = '';
                    }
                    return "{$branch['id']} - {$branch['name']} $logo";
                });
                $row->column(4, $tree);
                //  右侧显示新增框
                $row->column(8, function (Column $column) {
                    $column->append( $this->form() );
                });
            });


    }


    /**
     * Make a show builder.
     *
     * @param mixed $id
     * @return Show
     */
    protected function detail($id)
    {
        $show = new Show(ImagesCategory::findOrFail($id));
        $show->field('id', __('Id'));
        $show->field('pid', __('ImagesCategoryPid'));
        $show->field('name', __('ImagesCategoryName'));
        $show->field('cover_url', __('Cover url'))->image('',200,200);
        $show->field('sort', __('Sort'));
        $show->field('created_at', __('Created at'));
        $show->field('updated_at', __('Updated at'));
        $show->field('deleted_at', __('Deleted at'));
        return $show;
    }
    /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {
        $form = new Form(new ImagesCategory());
        $form->select('pid', __('ImagesCategoryPid'))->options(ImagesCategory::selectOptions());// 使用数据模型树，用于选择父级
        $form->text('name', __('ImagesCategoryName'))->required();
        // 以合适比例裁剪成300x300，更多使用方法 http://image.intervention.io/api/fit
        $form->image('cover_url', __('Cover url'))->removable()->fit(300);
        $form->number('sort', __('Sort'))->default(100);
        $form->setAction(admin_base_path('images-categories'));// 设置post数据到当前页，页面接收到会执行插入操作
        $form->header()->disableList();// 移除跳转列表按钮
        return $form;
    }
}

 

现在大致功能已经完成，可实现分类拖拽然后保存等操作。

 

 

但是现在的表是用到软删除的，发现树形列表里并没有回收站这个功能，下面自己拓展一下。

 

 

4、自定义工具

先定义工具类app/Admin/Extensions/Tools/CategoryRecycle.php：

<?php
namespace App\Admin\Extensions\Tools;
use Encore\Admin\Admin;
use Encore\Admin\Grid\Tools\AbstractTool;
use Illuminate\Support\Facades\Request;
/*
 * 分类回收站按钮工具类
 * */
class CategoryRecycle extends AbstractTool
{
    protected function script()
    {
        $url = Request::fullUrlWithQuery(['category_recycle' => '_category_recycle_']);
        return <<<EOT
$('input:radio.category_recycle').change(function () {
    var url = "$url".replace('_category_recycle_', $(this).val());
    $.pjax({container:'#pjax-container', url: url });
});
EOT;
    }
    public function render()
    {
        Admin::script($this->script());
        $options = [
            'default'   => '默认',
            'd'     => '回收站',
        ];
        return view('admin.tools.category_recycle', compact('options'));
    }
}

视图 admin.tools.category_recycle 文件为resources/views/admin/tools/category_recycle.blade.php:

<div class="btn-group" data-toggle="buttons">
    @foreach($options as $option => $label)
        <label class="btn btn-default btn-sm {{ \Request::get('category_recycle', 'default') == $option ? 'active' : '' }}">
            <input type="radio" class="category_recycle" value="{{ $option }}">{{$label}}
        </label>
    @endforeach
</div>

 

控制器修改如下：

主要修改了tree获取数据的查询条件

<?php
namespace App\Admin\Controllers;
use App\Admin\Extensions\Tools\CategoryRecycle;
use App\Models\ImagesCategory;
use Encore\Admin\Controllers\AdminController;
use Encore\Admin\Form;
use Encore\Admin\Grid;
use Encore\Admin\Layout\Content;
use Encore\Admin\Show;
use Encore\Admin\Tree;
use Encore\Admin\Layout\Column;
use Encore\Admin\Layout\Row;
use Illuminate\Support\Facades\Request;
class ImagesCategoryController extends AdminController
{
    /**
     * Title for current resource.
     *
     * @var string
     */
    protected $title = '图片分类';
    /**
     * Make a grid builder.
     *  这个没用了
     * @return Grid
     */
//    protected function grid()
//    {
//        $grid = new Grid(new ImagesCategory());
//
//        $grid->column('id', __('Id'));
//        $grid->column('pid', __('ImagesCategoryPid'));
//        $grid->column('name', __('ImagesCategoryName'));
//        $grid->column('cover_url', __('Cover url'))->image('',150,150);
//        $grid->column('sort', __('Sort'));
//        $grid->column('created_at', __('Created at'));
//        $grid->column('updated_at', __('Updated at'));
//        $grid->column('deleted_at', __('Deleted at'));
//        $grid->filter(function ($filter) {
//            // 范围过滤器，调用模型的`onlyTrashed`方法，查询出被软删除的数据。
//            $filter->scope('trashed', '回收站')->onlyTrashed();
//        });
//        return $grid;
//    }
    /**
     * Index interface.
     * 这里重写首页实现树状结构
     *
     * @return Content
     */
    public function index(Content $content)
    {
        return $content
            ->header($this->title)
            ->description('列表')->row(function (Row $row) {
                // 左侧显示树形分类
                $tree = new Tree(new ImagesCategory());
                // 添加查询条件
                $tree->query(function ($model){
                    if (Request::get('category_recycle')=='d'){
                        $model = $model->onlyTrashed();
                    }
                   return $model;
                });
                $tree->disableCreate();// 禁用新增按钮
                // 添加回收站按钮组
                $tree->tools(function ($tools){
                    $tools->add((new CategoryRecycle())->render());
                });
                // 修改返回结构
                $tree->branch(function ($branch) {
                    if ($branch['cover_url']){
                        $src = config('filesystems.disks.admin.url') . '/' . $branch['cover_url'] ;
                        $logo = "<img src='$src' style='max-width:30px;max-height:30px;border-radius: 100%;' class='img'/>";
                    }else{
                        $logo = '';
                    }
                    return "{$branch['id']} - {$branch['name']} $logo";
                });
                $row->column(4, $tree);
                //  右侧显示新增框
                $row->column(8, function (Column $column) {
                    $column->append( $this->form() );
                });
            });


    }


    /**
     * Make a show builder.
     *
     * @param mixed $id
     * @return Show
     */
    protected function detail($id)
    {
        $show = new Show(ImagesCategory::findOrFail($id));
        $show->field('id', __('Id'));
        $show->field('pid', __('ImagesCategoryPid'));
        $show->field('name', __('ImagesCategoryName'));
        $show->field('cover_url', __('Cover url'))->image('',200,200);
        $show->field('sort', __('Sort'));
        $show->field('created_at', __('Created at'));
        $show->field('updated_at', __('Updated at'));
        $show->field('deleted_at', __('Deleted at'));
        return $show;
    }
    /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {
        $form = new Form(new ImagesCategory());
        $form->select('pid', __('ImagesCategoryPid'))->options(ImagesCategory::selectOptions());// 使用数据模型树，用于选择父级
        $form->text('name', __('ImagesCategoryName'))->required();
        // 以合适比例裁剪成300x300，更多使用方法 http://image.intervention.io/api/fit
        $form->image('cover_url', __('Cover url'))->removable()->fit(300);
        $form->number('sort', __('Sort'))->default(100);
        // 只有index页面要使用这个，不然编辑页面不会在action的url里传编辑的id
        if(!preg_match('/edit/',Request::path())){
            $form->setAction(admin_base_path('images-categories'));// 设置post数据到当前页，页面接收到会执行插入操作
        }
        $form->header()->disableList();// 移除跳转列表按钮
        return $form;
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以下省略。。。


最近弄了几个站，留个外链
ITM游戏资源
ITM资源

Kin1713172499
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2.laravel-admin商品分类管理
qq_28613081的博客
07-29 611
laravel-admin商品分类管理1.laravel-admin安装1.1.环境准备1.2.安装1.2.汉化1.3.基础操作2.商品类目开发 1.laravel-admin安装 1.1.环境准备 创建数据库 users-------->略 products-------->略 1.2.安装 cd /www/wwwroot/lms/blog/ 安装 composer require encore/laravel-admin 发布资源 php artisan vendor:publish --
laravel-admin 自定义分类样式
mlle_123的博客
07-14 1533
$typeList = ArticleTypeModel::getCategory(0); $filter->equal('arttype_id','分类')->select($typeList); public static function getCategory($pid){ $data = self::query()->where('web_id',env('WEB_ID'))->get(['arttype_id as id','typename as te
laravel admin实现分类树/模型树的示例代码
12-17
修改模型Category.php <?php namespace App\Admin\Models; use Encore\Admin\Traits\AdminBuilder; use Encore\Admin\Traits\ModelTree; use Illuminate\Database\Eloquent\Model; class Category extends Model { use ModelTree, AdminBuilder; protected $table = 'category'; public function __construct(array $attrib
laravel-admin分类树/模型树
lion的博客
06-08 1527
修改模型Category.php <?php namespace App\Admin\Models; use Encore\Admin\Traits\AdminBuilder; use Encore\Admin\Traits\ModelTree; use Illuminate\Database\Eloquent\Model; class Category extends Model { use ModelTree, AdminBuilder; protected $table
laravel-admin 分类显示，多级显示
mlle_123的博客
07-27 3561
laravel-admin grid列表显示 $grid ->superior_name(‘上级地区’); Model里面操作 public function area(){ return KaTeX parse error: Expected 'EOF', got '}' at position 42: …','upid'); }̲ public functi…this-&gt...
【laralve项目】@14 laravel-admin处理后台分类，选择上级模型树
咔咔博客
07-10 2763
需求 1.点击分类的修改 2.实现这里的上下级关系 准备素材 1.安装laravel 2.安装laravle-admin 3.分类数据库 提供素材 这里就只提供数据库的素材了，至于laravel跟laravel-admin的素材自己直接下载即可 模型文件 存放位置app\Models\GoodsCategory.php 然后放置下面的内容 <?php namespace App\Mod...
laravel-admin 树状列表
mlle_123的博客
04-21 2119
namespace App\Admin\Controllers; use App\Model\AddressModel; use App\Model\ArticleModel; use App\Model\ArticleTypeModel; use Encore\Admin\Controllers\AdminController; use Encore\Admin\Facades\Admin;...
基于Laravel-admin 后台的自定义页面用法详解
01-02
Laravel-admin 这个后台很好用，几乎省去了html和js的困扰，让后台CURD变得优雅简洁。 这是一个自定义面的Demo 路由定义： $router->get('mails/send', 'MailController@send'); $router->post('mails/send', '...
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
01-02
主要是参考laravel-admin 自定义图表 的方法，下面简要介绍一下 1、将需要用到的需要引用的插件采用下面的方法引入： 用echart.js举例，首先要下载echart.js，放到public目录下面，比如放在public/vendor/echart.js...
laravel8 实现树状结构和递归处理
daxianyu666的博客
12-14 1051
1.树状结构 /** * 数组的合并，并加上html标识前缀 * @param array $data * @param int $pid * @param string $html * @param int $level * @return array */ public function treeLevel(array $data, int $pid = 0, string $html = '--', int $l
Laravel开发-tree
08-28
Laravel开发-tree 改进的前序遍历树模型
laravel-admin：form表单树状复选框组件（CheckboxTree）.rar
03-01
该插件是一个树状复选框组件，解决需要划分多级功能的需求，如权限分配、商品划分等功能。
解决laravel-admin 树状模型删除失效
JieWeiXiangWen的博客
07-16 286
解决laravel-admin树状模型删除失效
laravel model中无限分类递归 与 展示select 树形菜单 升级版 二
Do_Only的博客
05-11 3589
前言： 每次做权限管理都在郁闷别人后台的相关配置，每一个后台总是有差异需求，但是万变不离其宗，我们还是逃脱不了 常识性的无线分类递归 与 菜单树的限制 ，这里 为自己，他人总结出来了laravel 中自己个人常用的两种方法，用的时候直接拷贝就行了。 如果你有疑问 联系我qq无疑是最好的选择2097724800 上班专业q，这里 只粗暴的显示代码和用法 并没有给出你想看到的效果图，有句话是【绝...
php的treeview,laravel-admin 开发 bootstrap-treeview 扩展包
weixin_31533357的博客
03-25 195
效果图：开发过程：1、先创建Laravel项目，并集成laravel-admin，教程：2、生成开发扩展包php artisan admin:extend csp/cascade --namespace=Csp\Cascade其中， csp/cascade 是包名， CspCascade 是命名空间，生成的结构如下(删减版)：3、删除没必要的目录，以及添加CSS、JS资源4、修改CascadeS...
贡献一个 Laravel 树形结构管理包 ClosureTable
weixin_33958366的博客
11-13 1101
About 优雅的树形数据结构管理包,基于Closure Table模式设计. github 欢迎不吝Star Features 优雅的树形数据设计模式 数据和结构分表,操作数据不影响结构 一个Eloquent Trait操作简单 无需修改表,兼容旧数据 完善的树操作方法 支持生成树形数据 支持多棵树并存(多个根) 支持节点/树修复 支...
laravel-admin form表单控件篇——tabs标签控件和checkboxTree树状复选框控件
qq_38421226的博客
03-01 1976
一、效果展示 二、使用介绍 （1）资源下载：tabs控件和checkboxTree控件 （2）控件注册 下载资源后，放置到项目指定目录中（app/Admin/Extensions/Form），然后在app/Admin/bootstrap.php文件中注册 // 自定义Tab切换组件（注意：不可注册tab，因为form表单本身已存在tab这个控件） Form::extend('tabs', \App\Admin\Extensions\Form\Tabs\Tabs::class); // 自..
admin.php 自定义,基于Laravel-admin 后台的自定义页面用法详解
最新发布
06-09
admin.php 是 Laravel-Admin 后台管理系统的配置文件，可以用来定义自定义页面。 下面是如何创建自定义页面的步骤： 1. 在 app/Admin 目录下创建一个控制器文件，例如 CustomController.php。 2. 在控制器中定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值