广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >Dcat Admin 入门应用(三)Grid 之 Column
  • 751
分享到

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

2024-04-02 19:04:59 751人浏览 独家记忆
摘要

1、数据仓 通过数据仓生成grid数据 <?PHP namespace App\Admin\Repositories; use Dcat\Admin\Repositories\EloquentReposit

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),
                        ]);
                    });
                }
            }); 
        });
        
    }

--结束END--

本文标题: Dcat Admin 入门应用(三)Grid 之 Column

本文链接: https://www.lsjlt.com/news/99286.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Dcat Admin 入门应用(三)Grid 之 Column
    1、数据仓 通过数据仓生成grid数据 <php namespace App\Admin\Repositories; use Dcat\Admin\Repositories\EloquentReposito...
    99+
    2022-10-22
  • Dcat Admin 入门应用(一)安装部署
    一、简介 Dcat Admin是一个基于laravel-admin二次开发而成的后台系统构建工具,只需极少的代码即可快速构建出一个功能完善的高颜值后台系统。支持页面一键生成CURD代码,内置丰富的后台常用组件,开箱即用,让开发者告别冗杂的...
    99+
    2022-10-22
  • Dcat Admin 入门应用(二)代码生成器
    一、代码生成器 在日常开发中,我们可以用代码生成器一键生成增删改查页面代码,非常的方便快捷。 1、一键生成增删改查页面 1.1、将项目的APP_DEBUG开起(true),打开项目即可看到侧边栏的开发工具菜单,打开代码生成器; 1.2...
    99+
    2022-10-22
  • Dcat Admin 入门应用(四)自定义页面
    自定义页面 Dcat Admin构建的是一个单页应用,加载的JS脚本只会执行一次,所以初始化操作不能直接放在JS脚本中,应该使用Admin::script方法载入。 示例 创建自定义页面 需要实现Renderable接口,统一实现rend...
    99+
    2022-10-22
  • Dcat Admin 入门应用(五)文件上传之OSS自定义上传
    数据表单通过以下的调用来生成图片/文件上传表单,支持本地和云存储的文件上传,该文章介绍如何通过自定义上传路径处理文件上传和将文件存储到阿里云OSS。 1、上传组件是基于webuploader实现的,具体的使用配置可参考webuploade...
    99+
    2022-10-22
  • Dcat Admin 入门应用(六)列模态窗-异步数据和同步数据展示
    模式窗按需显示:通过if条件判断是否在column上添加模态窗显示 模式窗同步和异步获取数据展示 选择性添加模态窗 通过列的if判断,可以进行选择行的添加显示方式 $grid->column('remark')->if(...
    99+
    2022-10-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作