文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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;
    
        
        public function getGridColumns(){
            return ['id', 'title', 'director', 'rate', ...];
        }
    }

2、控制器

<?php

    ...
    
     
    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


    
    
    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),
                        ]);
                    });
                }
            }); 
        });
        
    }
阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯