laravel Dcat Admin 入门应用（三）Grid 之 Column

Dcat Admin 是一个基于 Laravel-admin 二次开发而成的后台构建工具，只需很少的代码即可构建出一个功能完善的高颜值后台系统。支持页面一键生成 CURD 代码，内置丰富的后台常用组件，开箱即用，让开发者告别冗杂的 HTML 代码。
laravel Dcat Admin 入门应用（三）Grid 之 Column

福利彩蛋：没有好玩的 API 接口？上百款免费接口等你来，免费 API，免费 API 大全

1、数据仓

通过数据仓生成grid数据

<?phpnamespace 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触发classTooltip::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),]);});}}); });}

福利彩蛋：没有好玩的 API 接口？上百款免费接口等你来，免费 API，免费 API 大全