通过自定义类，自定义模板来实现特定需求，如何引入js,css文件，如果在自定义的类或者模板里，添加css，js代码？

接下来以自定义的动作类来进行举例说明，创建一个全局动作类

php artisan admin:action
选择0，可以应用到任何位置
Which type of action would you like to make?:
  [0] default
  [1] grid-batch
  [2] grid-row
  [3] grid-tool
  [4] form-tool
  [5] show-tool
  [6] tree-row
  [7] tree-tool
 > 0

在这个类里，引入相应的 JS，CSS静态资源文件，有两种办法。

1. 通过注册组件的方式

在Dcat 框架中，静态资源的存储位置目录是在

public/vendor/dcat-admin/dcat/plugins

所有的JS组件和对应的css文件默认都放在这里，当然我们也可以在其它目录上传资源文件。

先进入app\Admin\bootstrap.php文件
官方手册：https://learnku.com/docs/dcat-admin/2.x/static-resources/9720#3c8750

在bootstrap.php 做两件事：
（1）注册路径别名
（2）注册组件

注册路径别名，可以先把前面的目录绑定到变量上，这样后面就可以少写一些代码了。

Admin::asset()->alias('@jiemo','vendor/dcat-admin/dcat/plugins');

然后注册组件
使用Admin::asset()方法，返回Dcat\Admin\Layout\Asset对象.
继续调用alias()方法，注册组件，将自己想引入的js和css文件，如下所示放入到数组里。

Admin::asset()->alias('@market',[
    'js'=>[
      '@jiemo/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js',
    ],
    'css'=>[
        '@jiemo/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css',
    ],
]);

在类里使用

在自定义的类中，比如在html()方法里，通过Admin::requireAssets()方法引入注册的静态资源文件组件。

这样js和css文件就会被直接引入。

public function html(){
        Admin::requireAssets(['@market']);
}

第二个办法：在类里单独加载

第二个办法将使用Admin::js() 和Admin::css()方法

在类里，先定义两个静态成员属性，将想引入的js和css文件路径 加入到类属性里。

class AdminTable extends Action
{

    public static $js=[
        'vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js'
    ];

    public static $css=[
        'vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css'
    ];

通过Admin::js() 和Admin::css()方法，引入对应的静态资源文件。

public function html(){
        Admin::js(static::$js);
        Admin::css(static::$css);

也可以根据需求，直接填写相对路径，通过Admin::js()，Admin::css() 方法

class UserController extend Controller
{
    public function index()
    {
        Admin::css('/assets/css/index.css');

        Admin::css([
            '/assets/css/index2.css'
        ]);
    }
}

动态添加JS，css代码

如果添加动态的js,css代码，有下面两个方法可以使用

Admin::script()
Admin:style()

使用说明：
在script()方法中，直接传入一个多行字符串，就可以了。

    public function index()
    {
        Admin::script(
            <<<JS
    console.log('Hello world!');
JS            
        );
    }

css代码也一样

    public function index()
    {
        Admin::style(
            <<<CSS
    body {
        color: #333;
    }
CSS            
        );
    }

最后渲染的时候，就可以看到加入的js和css代码了。

在自定义模板中引入静态资源和代码

之前的操作都是在Dcat Admin定义的类中，引入静态资源，如果直接在自定义的模板里，引入资源文件，可以如下操作：

使用admin_asset()函数，后面添加的路径从vendor开始，这块要记住。

// 引入css
<link rel="stylesheet" href="{{ admin_asset("vendor/dcat-admin/dcat-admin/main.min.css") }}">

// 引入js
<script src="{{ admin_asset('vendor/dcat-admin/dcat-admin/main.min.js')}}"></script>

在模板中写动态JS代码

模板里JS代码，就必需要写在Dcat.ready()方法内部了，它的使用就像jquery一样。

<script>
Dcat.ready(function () {
   console.log('所有js都加载完成了'); 
});
</script>

关于Dcat JS组件的用法，可以看官方手册：https://learnku.com/docs/dcat-admin/2.x/js-component/8087#82eb9e

通过npm 安装 新的js组件

测试过后发现，通过npm安装，或者下接下载相关组件，然后手动上传到dcat框架的组件目录就可以了。