Dcat Admin 入门应用（四）自定义页面
短信预约 -IT技能 免费直播动态提醒
自定义页面
Dcat Admin构建的是一个单页应用，加载的JS脚本只会执行一次，所以初始化操作不能直接放在JS脚本中，应该使用Admin::script方法载入。
示例
创建自定义页面
- 需要实现Renderable接口，统一实现render
- 自定义页面可以选择性的加载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;
}
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>
自定义页面使用
...
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());
});
});
}
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
