当前位置: 首页 > 工具软件 > Dcat Admin > 使用案例 >

Dcat-Admin自定义列表样式

连德义
2023-12-01

这边使用Dcat-Admin开发后端,需要自定义表格样式,但是这边又想使用框架自带的分页和筛选功能,这边查看框架的源码,然后按照下面的写法实现了需求

<?php

namespace App\Admin\Controllers;

use App\Admin\Repositories\Custom;
use App\Common\Enums\CategoryEnum;
use Dcat\Admin\Admin;
use Dcat\Admin\Grid;

class CustomController extends AdminController
{
    /**
     * Make a grid builder.
     * @return Grid
     */
    protected function grid() {

        return Grid::make(new Custom(), function (Grid $grid) {

            if (request()->get('_view_') !== 'list') {
                // 设置自定义视图
                $grid->view('admin.custom.index');
            }

            $grid->paginate(50);
            $grid->column('url', '图片')->image('', 100);
            $grid->column('title', '名称');
            $grid->column('link', '链接');
            $grid->column('num', '下载次数');

            $grid->selector(function (Grid\Tools\Selector $selector) {
                $selector->selectOne('cate', '分类', $cates);
                $selector->selectOne('type', '日期', [0 => '今天', 1 => '昨天', 7 => '近一周', 30 =>'近一月']);
            });

            // 禁掉筛选按钮
            $grid->disableFilterButton();

            // 禁用操作按钮
            $grid->disableActions();

            // 设置边线
            $grid->withBorder();

            // 设置复选框
            $grid->disableRowSelector();

            $grid->disableCreateButton();
            $grid->disableRefreshButton();
        });
    }

}

上述为控制器代码,如果使用了框架自带的字段属性,在视图页面会转义携带过去,如:$grid->column(‘url’, ‘图片’)->image(’’, 100);使用了image,那么在视图中url字段内容就是一个完整的<img>标签

{{-- 选择器 --}}
{!! $grid->renderSelector() !!}

{{-- 自定义表格 --}}
<ul class="mailbox-attachments clearfix table custom-data-table data-table p-0" id="grid-table">
    @foreach($grid->rows() as $row)
        <li>
            <div class="mailbox-attachment-img">
                <span class="mailbox-attachment-icon has-img">
                    {!! $row->url !!}
                </span>
            </div>
            <div class="mailbox-attachment-info">
                <div class="recharge-info">
                    下载次数:{{$row->num}}
                </div>
                <div class="recharge-button" data-url="{{$row->link}}">
                    查看作品信息
                </div>
            </span>
            </div>
        </li>
    @endforeach
</ul>

{{-- 分页 --}}
{!! $grid->renderPagination() !!}

如上所示:
$grid->rows() 为表格列表内容,可以自己再上述自定义表格注释下开发自已相要的样式效果
{!! $grid->renderSelector() !!} 为框架自带的筛选器
{!! $grid->renderPagination() !!} 为框架自带的分页

 类似资料: