Dcat Admin 数据表格

2022-04-21
dcatadmin laravel php

Dcat Admin 的数据表格直译过来就是将数据的数据，以列表的形式展示在 DcatAdmin 页面中，在 Dcat Admin 的官方文档中有大量的篇幅描写了基于 bootstrap 的特性，与 Laravel 相互结合的各种语法糖进行演示。

通过 Dcat Admin 所提供的数据表格我们可以通过 Dcat Admin 方法来在表格的基础上，添加工具栏、过滤查询、过滤器、搜索、筛选器、编辑、创建、时间、软删除、渲染等，同时也有数据表格的样式来进行选择。

Grid

在接触到 Dcat Admin 数据表格之前，我们需要了解到 Dcat\Admin\Grid 类，它主要通过数据模型来生成表格，在之前我们可以使用 Dcat Admin 所提供的 Repositories(数据仓库) ，也可以直接从数据库中调用 Model，都是可以的。

在数据表格中，我们会了解到 DcatAdmin 中的 Repositories 和 Models 以及 Admin Controller 的使用与构造，首先，Dcat Admin 并没有为我们提供诸如 Laravel-Admin 类似的命令。

你需要做的是，通过 Factory SQL 来创建一个 SQL model，具体的你可以参考下 Laravel Factory SQL | kunlsq (kunlunsiqu.github.io) 文档进行操作，然后使用 Admin | 代码生成器选择已经创建的数据表，最后通过页面脚手架来进行操作。

点击提交后，我们可以清楚的看到 DcatAdmin 为我们构建了 Model、Controller、Repository，甚至是 Lang 语言文件等，在此之后，我们就可以通过《Dcat Admin 中文文档》 | Laravel China 社区 (learnku.com)官方文档中进行下一步的自定义。

由于官方文档主要起到的是参考作用，并不适用于从零开始构建一个 Dcat Admin 应用，因从我们建议你通过 [jqhph/dcat-admin-demo (github.com)](https://github.com/jqhph/dcat-admin-demo) 下载 [Admin | Dashboard](http://103.39.211.179:8080/admin) 的 Demo，根据需求进行自定义并参照官方文档，进行开发，会加快理解。

之后我们需要做的就是需要在 app/Admin/routes.php 中为我们刚刚所创建的 MovieController 加入一行路由，即：

1	$router->resource('movie','MovieController');

之后，你可以访问 Admin | 订单管理来访问刚刚通过页面脚手架所创建的页面，但在此之前，我们还需要在 app/Admin/bootstrap.php 目录中加入菜单，即 DcatAdmin 左侧导航栏中的数据：

[<?php  
  
use Dcat\Admin\Admin;  
use Dcat\Admin\Grid;  
use Dcat\Admin\Form;  
use Dcat\Admin\Grid\Filter;  
use Dcat\Admin\Show;  
use Dcat\Admin\Layout\Menu;  
/**  
 * Dcat-admin - admin builder based on Laravel. * @author jqh <https://github.com/jqhph>  
 * * Bootstraper for Admin. * * Here you can remove builtin form field: * * extend custom field: * Dcat\Admin\Form::extend('php', PHPEditor::class); * Dcat\Admin\Grid\Column::extend('php', PHPEditor::class); * Dcat\Admin\Grid\Filter::extend('php', PHPEditor::class); * * Or require js and css assets: * Admin::css('/packages/prettydocs/css/styles.css'); * Admin::js('/packages/prettydocs/js/main.js'); * */  
Admin::menu(function (Menu $menu) {  
 $menu->add([  
 [ 'id' => '1',  
 'title' => '亚马逊',  
 'icon' => 'fa fa-amazon',  
 'uri' => '',  
 'parent_id' => 0,  
 'permission_id' => 'test', // 权限绑定  
 'roles' => 'test-roles', // 角色绑定  
 ],  
 [  
 'id' => '2',  
 'title' => '订单管理',  
 'icon' => 'fa-reorder',  
 'uri' => 'movie',  
 'parent_id' => '1'  
 ]  
 ]);  
});](<%3C?php

use Dcat\Admin\Admin;
use Dcat\Admin\Grid;
use Dcat\Admin\Form;
use Dcat\Admin\Grid\Filter;
use Dcat\Admin\Show;
use Dcat\Admin\Layout\Menu;
/**
 * Dcat-admin - admin builder based on Laravel.
 * @author jqh <https://github.com/jqhph%3E
 *
 * Bootstraper for Admin.
 *
 * Here you can remove builtin form field:
 *
 * extend custom field:
 * Dcat\Admin\Form::extend('php', PHPEditor::class);
 * Dcat\Admin\Grid\Column::extend('php', PHPEditor::class);
 * Dcat\Admin\Grid\Filter::extend('php', PHPEditor::class);
 *
 * Or require js and css assets:
 * Admin::css('/packages/prettydocs/css/styles.css');
 * Admin::js('/packages/prettydocs/js/main.js');
 *
 */

Admin::menu(function (Menu $menu) {
    $menu->add([
        [
            'id'                =>       '1',
            'title'             =>       '亚马逊',
            'icon'              =>       'fa fa-amazon',
            'uri'               =>       '',
            'parent_id'         =>       0,             // 菜单子集
            'permission_id'     =>       'test',        // 权限绑定
            'roles'             =>       'test-roles',  // 角色绑定
        ],
        [
            'id'                =>      '2',
            'title'             =>      '订单管理',
            'icon'              =>      'fa-reorder',
            'uri'               =>      'movie',
            'parent_id'         =>      1
        ],
    ]);
});>)

再次需要注意的是参数是调整菜单的上下级，以上面的 Code 举例，亚马逊是一级菜单，而订单管理是二级菜单，这主要通过 permission_id 来进行调整。

同样的，配置完菜单后，我们还需要对该页面的标题进行设置，进入到 \resources\lang\zh_CN\movie.php 然后更改对应的元素在该语言下的翻译即可。

最后你可以Admin | 订单管理访问，来进行查看刚刚我们修改和创建后的页面即效果，然后按照官方文档，进一步根据场景来进行调整即可。

⬅️ Go back