登录
原创

Dcat Admin 入门应用(三)Grid 之 Column

专栏Dcat Admin入门应用
发布于 2020-10-10 阅读 1444
  • 后端
  • Laravel
原创

1、数据仓

通过数据仓生成grid数据

<?php

    namespace App\Admin\Repositories;
    
    use Dcat\Admin\Repositories\EloquentRepository;
    use App\Models\Draft as DraftModel;
    
    class Draft extends EloquentRepository
    {
        protected $eloquentClass = DraftModel::class;
    
        /**
         * 设置表格查询的字段,默认查询所有字段
         * 
         * @return array
         */
        public function getGridColumns(){
            return ['id', 'title', 'director', 'rate', ...];
        }
    }

2、控制器

<?php

    ...
    
     /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {

        return Grid::make(new Draft([
            'content' => function ($query) {
                $query->where('draft_id', '<', 5);
            }
        ]), function (Grid $grid) {
            $grid->column('id')->sortable();

           // 第一列显示id字段,并将这一列设置为可排序列
            $grid->column('id', 'ID')->sortable();

            // 第二列显示title字段,由于title字段名和Grid对象的title方法冲突,所以用Grid的column()方法代替
            $grid->column('title');

            // 第三列显示为describe字段
            $grid->column('describe');

            
            $grid->column('status', '有效')
            ->display(function ($status) {
                return $status ? '是' : '否';
            });

            // 下面为三个时间字段的列显示
            $grid->column('release_at');
            $grid->column('created_at');
            $grid->column('updated_at');
        });
    }

3、Grid -column扩展使用

1,可排序,帮助提示,top tips


    
    /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {

        //定义Tips触发class
        Tooltip::make('.td-top-copy')->purple()->top();
        
        //如果需要使用关联关系预加载的话可以如下初始化(预加载可以避免n+1查询,但是不可以对预加载数据进行分页处理)
        $drat = new Draft([
            //作者信息预加载
            'authorInfo' => function ($query) {
                //条件过滤预加载信息
                $query->where('status', 1);
            },
            //内容预加载
             'content' => function ($query) {
                $query->where('draft_id', '<', 5);
            }
        ];
        
        
        return Grid::make($drat), function (Grid $grid) {
        
            //针对数据仓调用原生model,同时添加查询条件,过了需要的数据
            $grid->model()->where('status', 1)->orderByDesc('created_at');
        
            //自定义返回样式:作者Id,添加帮助提示,自定义消息输出,鼠标hover后弹出title弹出
            $grid->column('author_id')
              ->help('这里是描述')
              ->display(function () {
                return ' <a data-title="' . $this->author_id . '" class="td-top-copy btn-white btn ">' . $this->author_id . '</a> &nbsp;&nbsp;&nbsp;';
            });
            
            //关联关系显示作者昵称
            $grid->column('authorInfo.nick_name')
            
            //根据状态的属性显示不同的样式
            $grid->column('status')
            ->using([
                1=>'成功',
                2=>'失败'
            ])
            ->label([
                'default'=> 'primary',
                1=>'success',
                2=>'danger'
            ]);
            
            //显示下拉框编辑根据状态附加select框进行编辑
            $grid->column('changeStatus', '管理员操作')
            ->display(function () {
                if (in_array($this->status, [1, 3])) {
                    return $this->status;
                }
                return '---';
            })->if(function ($column) {
                if (in_array($this->status, [1, 3])) {
                    return $column->select([
                        1 => '通过',
                        3 => '驳回',
                    ]);
                }
            });

            
            //如需自定义处理显示,可以在display()方法里进行处理
            $grid->column('authorInfo.nick_name', admin_trans_field('nick_name'))
            ->display(function ($nickName) {
                return "<span class='copy-author-id' >$nickName 获取Id:".$this->author_info['id']."</span>";
            });
        
            //标题:如果长度超过20,显示...(注意中文和html实体标签处理)
            //补充说明:在column,display的闭包函数里面可以通过this获取当前row的其他属性值
            $grid->column('title', admin_trans_field('article_title'))
                ->display(function ($title) {
                    //(注意中文和html实体标签处理)
                    $subTitle = $title = Helper::htmlEntityEncode($title);
                    if (mb_strlen($title) > 20) {
                        $subTitle = mb_substr($subTitle, 0, 20) . ' ... ';
                    }
                    return '<a style="color:orange;" target ="_blank" 
                    href="/details/' . $this->article['id'] . '" >' .
                        $subTitle . '</a>';
                });
                
             
            //一、弹窗展示文章内容信息
            $grid->column('markdown')->modal(function ($modal) {
                //设置弹窗标题
                $modal->title('标题:' . $this->title);
                //弹窗内容
                return "<div style='padding:10px 10px 0'><pre>{$this->content['markdown']}</pre></div>";
            }); 
            
            //二、弹窗展示文章内容信息(如果需要选择性的附加弹窗效果可以使用if)
            //这里是仅当内容长度大于20的时候才通过弹窗显示更多的内容
            $grid->column('content')->if(function ($column) {
                if (mb_strlen($this->content) >20) {
                    return $column->modal(admin_trans_field('content'), function () {
                        return CommentReview::make([
                            'content' => Helper::htmlEntityEncode($this->content),
                        ]);
                    });
                }
            }); 
        });
        
    }

评论区

励志做一条安静的咸鱼,从此走上人生巅峰。

0

0

0

举报