laravel Dcat Admin 入门应用(四)自定义页面

laravel Dcat Admin 入门应用(四)自定义页面

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

自定义页面

Dcat Admin构建的是一个单页应用,加载的JS脚本只会执行一次,所以初始化操作不能直接放在JS脚本中,应该使用Admin::script方法载入。

福利彩蛋:没有好玩的 API 接口?上百款免费接口等你来,免费 API,免费 API 大全

示例

创建自定义页面
  1. 需要实现Renderable接口,统一实现render
  2. 自定义页面可以选择性的加载js和css,也可以加载页面需要执的js(当然页面js也可以直接写在模板里面)
<?php

namespace App\Admin\Views\Tools\SiteMap;

use Dcat\Admin\Admin;
use Illuminate\Contracts\Support\Renderable;
use Throwable;

class ConvertPage implements Renderable
{
    protected $default = '';

    // 定义页面所需的静态资源,这里会按需加载
    public static $js = [
        // js脚本不能直接包含初始化操作,否则页面刷新后无效
        'js/laydate/laydate.js',
        'js/custom/tools.js',
        'js/common.js',
    ];

    public static $css = [
        'css/custom/custom.css'
    ];

    public function script()
    {
        return <<<JS
        //日期控件实例化        
        dateRange('dateRangeMap',"$this->default");
        // 初始化操作写在这里
        $('.submit-btn').click(function(){
            var that = $(this)
            downLoadUrl(that)
        })
JS;
    }

    /**
     * Get the evaluated contents of the object.
     *
     * @return array|string
     * @throws Throwable
     */
    public function render()
    {
        $this->default = date('Y-m-d', strtotime('-30 days')) . ' - ' . date('Y-m-d');
        // TODO: Implement render() method.
        // 在这里可以引入你的js或css文件
        Admin::js(static::$js);
        Admin::css(static::$css);

        // 需要在页面执行的JS代码
        // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
        Admin::script($this->script());
        return view('admin.custom.sitemap')->render();
    }
}

创建自定义页面模板

可以根据需求构建更为复杂的页面,通过js、css自定义加载实现页面功能扩展和样式扩展
adminLTE样式大部分可以延用

注:页面模板中不要包含<body><html>等标签:


<div class="box box-primary" style="padding: 10px">
    <div class="box-header with-border">
        <h3 class="box-title">资源链接生成</h3>
    </div>
    <form class="form-inline padding20" role="form" method="post"
          action="{{ url('tools/sitemap/download/url') }}">
        {{ csrf_field() }}

        <div class="form-group">
            <label>生成类型:</label>
            <select name="convert" id="convertType" class="form-control">
                <option value="1"> 文章</option>
                <option value="2"> 专栏</option>
                <option value="3"> 用户</option>
            </select>
        </div>
        <div class="form-group">
            <label>创建时间:</label>
            <input type="text" class="form-control date-range" readonly id="dateRangeMap" name="dateRange">
        </div>

        <div class="form-group">
            <div class="btn btn-primary submit-btn" data-total="0">生成并导出</div>
        </div>
    </form>
</div>

<script>
Dcat.ready(function () {
    // js代码也可以放在模板里面
    console.log('所有JS脚本都加载完了!!!');
});
</script>

自定义页面使用

    ...

   /**
     * 页面渲染
     * @param Content $content
     * @return Content
     */
    public function index(Content $content)
    {
        return $content
            ->header('')
            ->body(function (Row $row) {
                //这里是分成两列显示
                $row->column(6, function (Column $column) {
                    $column->row(new ConvertPage());
                });
                $row->column(6, function (Column $column) {
                    $column->row(new IdHash());
                });
            });
    }

福利彩蛋:没有好玩的 API 接口?上百款免费接口等你来,免费 API,免费 API 大全

  • 14
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值