[TOC]
# .com\view\admin\layout.html
{__CONTENT__}為fetch()指定的模板內容
```
//layer 是分組？
{if $layer == false}
{if $pjax == true}
{include file="public/breadcrumb" /}
{__CONTENT__}
{else /}
{include file="public/header" /}
{include file="public/left" /}
<div class="content-wrapper">
{include file="public/breadcrumb" /}
{__CONTENT__}
</div>
{include file="public/footer" /}
{/if}
{else /}
{include file="public/header" /}
<div class="content-wrapper">
{__CONTENT__}
</div>
{include file="public/footer" /}
{/if}
```
## public/header
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SIYUCMS | 控制臺</title>
{include file="public/css_js" /}
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed pace-primary text-sm {if $layer == true}layer-body{/if}">
<div class="wrapper">
{if $layer == false}
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
</ul>
<!-- Left navbar links -->
<ul class="navbar-nav js_left_menu">
<li class="nav-item active">
<a class="nav-link" href="javascript:;">
<i class="fas fa-cog"></i>
<span>主導航</span>
</a>
</li>
{if count($cates)}
<li class="nav-item">
<a class="nav-link" href="javascript:;">
<i class="fa fa-th-large"></i>
<span>內容管理</span>
</a>
</li>
{/if}
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- User Account Menu -->
<li class="nav-item dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="{:session('admin.image') ?: '/static/plugins/AdminLTE/dist/img/user2-160x160.jpg'}" class="user-image">
<span class="d-none d-lg-block">{:session('admin.nickname') ?: session('admin.username')}</span>
</a>
<ul class="dropdown-menu">
<li class="user-header">
<img src="{:session('admin.image') ?: '/static/plugins/AdminLTE/dist/img/user2-160x160.jpg'}" class="img-circle">
<h5>上次登錄時間：{:session('admin.login_time')}</h5>
<h5>上次登錄IP：{:session('admin.login_ip')}</h5>
</li>
<li class="user-footer">
<div class="pull-left">
<a href="{:url('Admin/edit',['id'=>session('admin.id')])}" class="btn btn-default btn-flat">資料</a>
</div>
<div class="pull-right">
<a href="{:url('Login/logout')}" class="btn btn-default btn-flat">退出</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button" title="全屏">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button" title="自定義">
<i class="fas fa-palette"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link js_clear_cash" href="javascript:;" title="清空緩存">
<i class="fas fa-sync-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{$indexUrl}" target="_blank" title="前臺首頁">
<i class="fas fa-home"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
{/if}
```
### public/css_js
```
<!-- layui -->
<link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/google-fonts/google.fonts.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/AdminLTE.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/daterangepicker/daterangepicker.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<!-- Toastr -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/toastr/toastr.min.css">
<!-- pace-progress -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/pace-progress/themes/black/pace-theme-flat-top.css">
<!-- jQuery -->
<script src="/static/plugins/AdminLTE/plugins/jquery/jquery.min.js"></script>
<!-- layui -->
<script src="/static/plugins/layui/layui.js"></script>
<!-- webuploader -->
<link rel="stylesheet" href="/static/plugins/webuploader-0.1.5/webuploader.css">
<script src="/static/plugins/webuploader-0.1.5/webuploader.js"></script>
{include file="index/webuploader" /}
{if $system.editor == '1'}
<!-- ueditor -->
<script src="/static/plugins/ueditor/ueditor.config.js"></script>
<script src="/static/plugins/ueditor/ueditor.all.min.js"> </script>
<script src="/static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
{else}
<!-- ckeditor4 -->
<script src="/static/plugins/ckeditor/ckeditor.js"></script>
{/if}
<!-- Bootstrap Table -->
<link rel="stylesheet" href="/static/plugins/bootstrap-table/bootstrap-table.min.css" />
<!-- layer 彈層組件 -->
<script>
layui.use('layer',
function () {
var layer = layui.layer;
})
</script>
<!-- zTree 樹節點組件 -->
<script type="text/javascript" src="/static/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<!-- jQueryTagsInput -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/jQueryTagsInput/jquery.tagsinput.css">
<script src="/static/plugins/AdminLTE/plugins/jQueryTagsInput/jquery.tagsinput.js"></script>
<!-- Select2 -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<script src="/static/plugins/AdminLTE/plugins/select2/js/select2.full.min.js"></script>
<!-- CodeMirror -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/codemirror/codemirror.css">
<link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/codemirror/theme/monokai.css">
<!-- SIYUCMS -->
<link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/siyucms.css">
<script src="/static/plugins/siyu-ui.js?v=20201013"></script>
<script src="/static/plugins/siyucms.js?v=20201013"></script>
```
## public/left
```
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-default elevation-4">
<!-- Brand Logo -->
<a href="{:url('Index/index')}" class="brand-link">
<img src="/static/plugins/AdminLTE/dist/img/AdminLTELogo.png" alt="SIYUCMS" class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">SIYUCMS</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{:session('admin.image') ?: '/static/plugins/AdminLTE/dist/img/user2-160x160.jpg'}" class="img-circle elevation-2">
</div>
<div class="info">
<a href="{:url('Admin/edit',['id'=>session('admin.id')])}" class="d-block">{:session('admin.nickname') ?: session('admin.username')}</a>
</div>
</div>
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2 mb-2">
<ul class="nav nav-pills no_radius nav-sidebar flex-column nav-child-indent js_left_menu_show" data-widget="treeview" role="menu" data-accordion="true">
<li data-item="0" class="nav-header nav-item_0">主導航</li>
{volist name="$menus" id="vo"}
<li data-item="0" class="nav-item nav-item_0 has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon {$vo.icon|default='fas fa-bars'}"></i>
<p>
{$vo.title}
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
{volist name="vo.children" id="voo"}
<li class="nav-item {if count($voo.children)}has-treeview{/if}">
<a href="{if count($voo.children)}#{else /}{$voo.href}{/if}" class="nav-link">
<i class="{$voo.icon|default='far fa-circle'} nav-icon"></i>
<p>{$voo.title}{if count($voo.children)}<i class="right fas fa-angle-left"></i>{/if}</p>
</a>
{if count($voo.children)}
<ul class="nav nav-treeview">
{volist name="voo.children" id="vooo"}
<li class="nav-item">
<a href="{$vooo.href}" class="nav-link">
<i class="{$vooo.icon|default='far fa-circle'} nav-icon"></i>
<p>{$vooo.title}</p>
</a>
</li>
{/volist}
</ul>
{/if}
</li>
{/volist}
</ul>
</li>
{/volist}
<li data-item="1" class="nav-header nav-item_1" style="display: none">內容管理</li>
{volist name="$cates" id="vo"}
<li data-item="1" class="nav-item nav-item_1 {if count($vo.sub)}has-treeview{/if}" style="display: none">
<a href="{if count($vo.sub)}#{else /}{:url($vo.module.model_name.'/index',['cate_id'=>$vo.id])}{/if}" class="nav-link">
<i class="fas fa-bars nav-icon"></i>
<p>
{$vo.cate_name}
{if count($vo.sub)}<i class="right fas fa-angle-left"></i>{/if}
</p>
</a>
{if count($vo.sub)}
<ul class="nav nav-treeview">
{volist name="vo.sub" id="voo"}
<li class="nav-item">
<a href="{:url($voo.module.model_name.'/index',['cate_id'=>$voo.id])}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
{$voo.cate_name}
{if count($voo.sub)}<i class="right fas fa-angle-left"></i>{/if}
</p>
</a>
{if count($voo.sub)}
<ul class="nav nav-treeview">
{volist name="voo.sub" id="vooo"}
<li class="nav-item">
<a href="{:url($vooo.module.model_name.'/index',['cate_id'=>$vooo.id])}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
{$vooo.cate_name}
</p>
</a>
</li>
{/volist}
</ul>
{/if}
</li>
{/volist}
</ul>
{/if}
</li>
{/volist}
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<script>
// 主導航、內容管理切換
$(".js_left_menu li").click(function () {
// 通過 .index()方法獲取元素下標（從0開始）
var _index = $(this).index();
// 讓左側菜單第 _index 個顯示出來，其他的隱藏起來
$(".js_left_menu_show > li").hide();
$(".js_left_menu_show > li.nav-item_" + _index).show();
// 當前菜單添加選中效果，同級的移除選中效果
$(this).addClass('active').siblings('li').removeClass('active');
})
// 清空緩存
$(".js_clear_cash").click(function () {
var url = "{:url('index/clear')}";
$.modal.confirm('確定要清除緩存嗎？', function () {
$.post(url, {
del: true
}, function (result) {
if (result.error == 0) {
$.modal.alertSuccess(result.msg, function (index) {
layer.close(index);
$.pjax.reload('.content-wrapper'); // pjax 重載
});
} else {
$.modal.alertError(result.msg);
}
});
});
})
</script>
```
## public/breadcrumb(內容頁面導航 ，顯示標題的那一丟丟，即button上的那一丟丟)
```
{if isset($page_title) && !empty($page_title)}
<div class="content-header">
<div class="container-fluid">
{$page_title|raw|default=''}
</div>
</div>
{elseif $breadCrumb /}
<div class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1 class="m-0">
{$breadCrumb.left.0}
<small>{$breadCrumb.left.1}</small>
</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="{:url('index/index')}">Home</a></li>
<li class="breadcrumb-item active"><a href="{:url($breadCrumb.right.url)}">{$breadCrumb.right.title}</a></li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
{/if}
```
## fetch()指定的模板內容
默認是（com\view\admin\salesmen_accounts_expenditure\layout.html
```
<!--內容開始-->
<section class="content">
{// 額外CSS代碼 }
{$extra_css|raw|default=''}
{// 額外HTML代碼 }
{$extra_html_content_top|raw|default=''}
<!--頂部提示開始-->
{notempty name="page_tips_top"}
<div class="alert alert-{$tips_type} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>{$page_tips_top|raw}</p>
</div>
{/notempty}
<!--頂部提示結束-->
<div class="container-fluid">
<div class="row">
<!--搜索區域開始-->
{include file="table_builder/search" /}
<!--列表區域開始-->
<div class="col-sm-12 select-table table-striped">
{include file="table_builder/toolbar" /}
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<script>
$(function() {
var options = {
uniqueId : "{$unique_id}", // 表格主鍵名稱，（默認為id，如表主鍵不為id必須設置主鍵）
url : "{$data_url|raw}", // 請求后臺的URL
addUrl : "{$add_url|raw}", // 新增的地址
editUrl : "{$edit_url|raw}", // 修改的地址
delUrl : "{$del_url|raw}", // 刪除的地址
exportUrl : "{$export_url|raw}", // 導出的地址
sortUrl : "{$sort_url|raw}", // 排序的地址
sortName : "{$unique_id}", // 排序列名稱
sortOrder : "desc", // 排序方式 asc 或者 desc
pagination : {$pagination}, // 是否進行分頁
parentIdField : "{$parent_id_field}", // 列表樹模式需傳遞父id字段名（parent_id/pid）
clickToSelect : true, // 默認false不響應，設為true則當點擊此行的某處時，會自動選中此行的checkbox/radiobox
pageSize : "{$page_size}", // 每頁顯示的行數
layerOpen : "{$layer_open}", // 添加/編輯等頁啟用layer彈層加載
columns: [
{
//field: 'state',
checkbox: true,
// 當某行包含checkbox_disabled時禁止選擇
formatter: function(value, row, index) {
if(row.checkbox_disabled =='1'){
return {
disabled : true
}
}
}
},
{volist name="columns" id="column"}
{
field: '{$column.name|default=''}', {// 字段名稱}
title: '{$column.title|default=''}', {// 字段別名}
{if $column.name==$unique_id}
sortable: true, {// 主鍵必須可以排序}
{else}
sortable: {$column.sortable}, {// 是否可排序}
{/if}
{notempty name="column.class"}
class: '{$column.class|default=''}', {// 使用class定義/覆蓋列的CSS類}
{/notempty}
{if $column.param }
{if $column.name == 'status' }
formatter: function(value, row, index) {
if (value == 0) {
return '<i class="fa fa-toggle-off text-info fa-2x cursor_pointer" onclick="$.operate.state(\'' + row.{$unique_id} + '\',\'{:url('state')}\')"></i>';
} else {
return '<i class="fa fa-toggle-on text-info fa-2x cursor_pointer" onclick="$.operate.state(\'' + row.{$unique_id} + '\',\'{:url('state')}\')"></i>';
}
}
{else}
formatter: function(value, row, index) {
if (value == 0) {
return '<span class="badge badge-{$column.param.0.class|default='danger'}">{$column.param.0|default='禁用'}</span>';
} else if (value == 1) {
return '<span class="badge badge-{$column.param.1.class|default='primary'}">{$column.param.1|default='啟用'}</span>';
}else if (value == 2) {
return '<span class="badge badge-{$column.param.1.class|default='info'}">{$column.param.2|default='狀態2'}</span>';
}else if (value == 3) {
return '<span class="badge badge-{$column.param.1.class|default='success'}">{$column.param.3|default='狀態3'}</span>';
}else {
var str = '';
{foreach $column.param as $key=>$vo }
var kk = '{$key}';
if (value == kk || checkValInStr(kk, value)) {
str += '<span class="badge badge-info">{$vo}</span> ';
}
{/foreach}
return str;
}
}
{/if}
{else}
{if $column.name == 'sort' }
formatter: function(value, row, index) {
return '<input class="form-control input-sm w_40 changeSort" type="text" value="' + value + '" data-id="' + row.{$unique_id} + '" onblur="$.table.sort(this)">';
}
{else}
{// 根據格式決定如何處理數據}
{switch column.type }
{case text }
formatter: function(value, row, index) {
return HTMLDecode(value);
}
{/case}
{case datetime }
formatter: function(value, row, index) {
return changeDateFormat(value);
}
{/case}
{case status }
formatter: function(value, row, index) {
if (value == 0) {
return '<span class="badge badge-{$column.param.0.class|default='danger'}">{$column.param.0.title|default='禁用'}</span>';
} else if (value == 1) {
return '<span class="badge badge-{$column.param.1.class|default='primary'}">{$column.param.1.title|default='啟用'}</span>';
}else if (value == 2) {
return '<span class="badge badge-{$column.param.1.class|default='default'}">{$column.param.1.title|default='狀態2'}</span>';
}else if (value == 3) {
return '<span class="badge badge-{$column.param.1.class|default='success'}">{$column.param.1.title|default='狀態3'}</span>';
}else {
return '<span class="badge badge-{$column.param.1.class|default='info'}">{$column.param.1.title|default='其他'}</span>';
}
}
{/case}
{case yesno }
formatter: function(value, row, index) {
if (value == 0) {
return '<i class="fa fa-ban text-{$column.param.0.class|default='danger'}"></i>';
} else if (value == 1) {
return '<i class="fa fa-check text-{$column.param.1.class|default='primary'}"></i>';
}
}
{/case}
{case link }
formatter: function(value, row, index) {
var link = '{$column.default|default=''}';
var reg = /__(.*?)__/g;
// 匹配ID和email，可能為任何的其他參數，但都是 __字段__ 格式
while (result = reg.exec(link)) {
link = link.replace(result[0], row[result[1]]);
}
// 拼接
link = '<a href="'+link+'" target="{$column.param}">' + value + '</a>';
return link;
}
{/case}
{case image }
formatter: function(value, row, index) {
if ($.common.isNotEmpty(value)) {
return '<a href="' + value + '" target="_blank"><img class="image_preview" src="' + value + '"></a>';
}
}
{/case}
{case color }
formatter: function(value, row, index) {
if ($.common.isNotEmpty(value)) {
return '<i class="table_colorpicker" style="background: ' + value + '""></i>';
}
}
{/case}
{case select }
formatter: function(value, row, index) {
return row.{$column.name|default=''};
}
{/case}
{case select2 }
formatter: function(value, row, index) {
return row.{$column.name|default=''};
}
{/case}
{case btn }
class : 'text-nowrap',
formatter: function(value, row, index) {
var actions = [];
{volist name="right_buttons" id="right_button"}
if('{$right_button.type|default=''}' == 'edit' || '{$right_button.type|default=''}' == 'preview'){
if('{$right_button.href|default=''}'){
var url = '{$right_button.href|default=''}';
var reg = /__(.*?)__/g;
// 匹配ID和email，可能為任何的其他參數，但都是 __字段__ 格式
while (result = reg.exec(url)) {
url = url.replace(result[0], row[result[1]]);
}
actions.push('<a class="{$right_button.class|default=''}" target="{$right_button.target|default=''}" href="'+url+'"><i class="{$right_button.icon|default=''}"></i> {$right_button.title|default=''}</a> ');
}else{
actions.push('<a class="{$right_button.class|default=''}" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.{$unique_id} + '\')"><i class="{$right_button.icon|default=''}"></i> {$right_button.title|default=''}</a> ');
}
} else if ('{$right_button.type|default=''}' == 'delete'){
if('{$right_button.href|default=''}'){
var url = '{$right_button.href|default=''}';
var reg = /__(.*?)__/g;
// 匹配ID和email，可能為任何的其他參數，但都是 __字段__ 格式
while (result = reg.exec(url)) {
url = url.replace(result[0], row[result[1]]);
}
actions.push('<a class="{$right_button.class|default=''}" target="{$right_button.target|default=''}" href="'+url+'"><i class="{$right_button.icon|default=''}"></i> {$right_button.title|default=''}</a> ');
}else{
actions.push('<a class="{$right_button.class|default=''}" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.{$unique_id} + '\')"><i class="{$right_button.icon|default=''}"></i> {$right_button.title|default=''}</a> ');
}
} else {
var url = '{$right_button.href|default=''}';
var reg = /__(.*?)__/g;
// 匹配ID和email，可能為任何的其他參數，但都是 __字段__ 格式
while (result = reg.exec(url)) {
url = url.replace(result[0], row[result[1]]);
}
actions.push('<a class="{$right_button.class|default=''}" target="{$right_button.target|default=''}" href="'+url+'"><i class="{$right_button.icon|default=''}"></i> {$right_button.title|default=''}</a> ');
}
{/volist}
return actions.join('');
}
{/case}
{default /}
{/switch}
{/if}
{/if}
},
{/volist}
]
};
$.table.init(options);
});
// 搜索
function searchPre() {
var data = {};
$.table.search('', data);
}
// 重置搜索
function resetPre() {
$.form.reset();
}
//HTML反轉義
function HTMLDecode(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
</script>
<!--bootstrap table end-->
<!--底部提示-->
{notempty name="page_tips_bottom"}
<div class="alert alert-{$tips_type} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>{$page_tips_bottom|raw}</p>
</div>
{/notempty}
{// 額外HTML代碼 }
{$extra_html_content_bottom|raw|default=''}
{// 額外JS代碼 }
{$extra_js|raw|default=''}
</section>
<!--內容結束-->
```
### table_builder/search
```
{if $search OR $page_tips_search }
<div class="col-12 search-collapse">
<form id="search_form">
<div class="select-list">
{notempty name="page_tips_search"}{$page_tips_search|raw}{/notempty}
{notempty name="search"}
<ul>
{volist name="search" id="search"}
<li>
<label>{$search.title|default=''}： </label>
{if $search.param }
{// 存在數組 }
{if $search.data_source == 2 && ($search.type == 'text' || $search.type == 'textarea' || $search.type == 'number' || $search.type == 'hidden') }
{// 模型關聯且需要轉換的單獨處理 }
<input type="text" id="search_{$search.name|default=''}" name="{$search.name|default=''}" value="{$search.default|default=''}"/>
{else}
<select id="search_{$search.name|default=''}" name="{$search.name|default=''}">
<option value="">所有</option>
{notempty name="search.param"}
{volist name="search.param" id="v"}
{if is_array($v)}
<option value="{$key}" {if ((string)$search.default == (string)$key)}selected{/if}{if $v.disabled == 1}disabled{/if}>{$v.value}</option>
{else}
<option value="{$key}" {if ((string)$search.default == (string)$key)}selected{/if}>{$v}</option>
{/if}
{/volist}
{/notempty}
</select>
{/if}
{else}
{// 不存在數組 }
{if $search.type == 'date' OR $search.type == 'time' OR $search.type == 'datetime' }
{// 日期類型的數據 }
<input type="text" id="search_{$search.name|default=''}" name="{$search.name|default=''}" value="{$search.default|default=''}" daterange="true" autocomplete="off"/>
{elseif $search.type == 'select2'}
<select class="select2" id="search_{$search.name|default=''}" name="{$search.name|default=''}" data-value="{$search.default|default=''}">
<option value="">所有</option>
</select>
<script>
$(function () {
var option = {};
// 啟用ajax分頁查詢
option = {
language: "zh-CN",
//allowClear: true,
ajax: {
delay: 250, // 限速請求
url: "{:url('Index/select2',['id'=>$search.field_id])}", // 請求地址
dataType: 'json',
data: function (params) {
return {
keyWord: params.term || '', //搜索參數
page: params.page || 1, //分頁參數
rows: params.pagesize || 10, //每次查詢10條記錄
};
},
processResults: function (data, params) {
params.page = params.page || 1;
if (params.page == 1) {
data.data.unshift({id: '', name: "", text: "所有"});
}
return {
results: data.data,
pagination: {
more: (params.page) < data.last_page
}
};
},
cache: true
}
};
// 默認值設置
var defaultValue = $("#search_{$search.name|default=''}").data("value");
if (defaultValue) {
$.ajax({
type: "POST",
url: "{:url('Index/select2',['id'=>$search.field_id])}",
data: {value: defaultValue},
dataType: "json",
async: false,
success: function(data){
$("#search_{$search.name|default=''}").append("<option selected value='" + data.key + "'>" + data.value + "</option>");
}
});
}
$("#search_{$search.name|default=''}").select2(option);
})
</script>
{else}
{// 其他類型的數據 }
<input type="text" id="search_{$search.name|default=''}" name="{$search.name|default=''}" value="{$search.default|default=''}"/>
{/if}
{/if}
</li>
{/volist}
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i class="fas fa-sync-alt"></i> 重置</a>
<input class="hide" type="submit" name="btnSave" value="提交" onclick="$.table.search();return false;"/>
</li>
</ul>
{/notempty}
</div>
</form>
</div>
{/if}
```
### table_builder/toolbar
```
<div class="btn-group-sm" id="toolbar" role="group">
{volist name="top_buttons" id="top_button"}
{notempty name="top_button.group"}
<div class="btn-group">
{/notempty}
<a class="{$top_button.class|default=''}" {notempty name="top_button.href"}href="{$top_button.href|default=''}"{/notempty}{notempty name="top_button.target"} target="{$top_button.target|default=''}"{/notempty}{notempty name="top_button.onclick"} onclick="{$top_button.onclick|default=''}"{/notempty}>
<i class="{$top_button.icon|default=''}"></i> {$top_button.title|default=''}
</a>
{notempty name="top_button.group"}
<button type="button" class="btn {$top_button.group.class|default='btn-info'} dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
{foreach $top_button.group.menus as $key=>$vo }
<a class="dropdown-item {$vo.class|default=''}" {notempty name="vo.href"}href="{$vo.href|default=''}"{/notempty}{notempty name="vo.target"} target="{$vo.target|default=''}"{/notempty}{notempty name="$vo.onclick"} onclick="{$vo.onclick|default=''}"{/notempty}>
<i class="{$vo.icon|default=''}"></i> {$vo.title|default=''}
</a>
{/foreach}
</div>
</div>
{/notempty}
{/volist}
</div>
```
## public/footer
```
{if $layer == false}
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2019-{:date("Y")} <a href="https://siyucms.com" target="_blank">siyucms.com</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> {:config('app.siyu_version')}
</div>
</footer>
{/if}
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<button id="totop" title="返回頂部" style="display: none;"><i class="fa fa-chevron-up"></i></button>
{include file="public/foot_css_js" /}
</body>
</html>
```
### public/foot_css_js
```
<!-- Bootstrap 4 -->
<script src="/static/plugins/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- daterangepicker -->
<script src="/static/plugins/AdminLTE/plugins/moment/moment.min.js"></script>
<script src="/static/plugins/AdminLTE/plugins/moment/locale/zh-cn.js"></script>
<script src="/static/plugins/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="/static/plugins/AdminLTE/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="/static/plugins/AdminLTE/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- overlayScrollbars -->
<script src="/static/plugins/AdminLTE/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- Toastr -->
<script src="/static/plugins/AdminLTE/plugins/toastr/toastr.min.js"></script>
<!-- pace-progress -->
<script src="/static/plugins/AdminLTE/plugins/pace-progress/pace.min.js"></script>
<!-- Bootstrap Table 表格插件樣式 -->
<script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/plugins/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="/static/plugins/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<link rel="stylesheet" href="/static/plugins/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css"/>
<script src="/static/plugins/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/plugins/AdminLTE/dist/js/adminlte.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/plugins/AdminLTE/dist/js/demo.js"></script>
<!-- pjax -->
<script src="/static/plugins/AdminLTE/plugins/pjax/jquery.pjax.js"></script>
<!-- jQueryForm -->
<script src="/static/plugins/AdminLTE/plugins/jQueryForm/jquery.form.js"></script>
<!-- CodeMirror -->
<script src="/static/plugins/AdminLTE/plugins/codemirror/codemirror.js"></script>
<script src="/static/plugins/AdminLTE/plugins/codemirror/mode/css/css.js"></script>
<script src="/static/plugins/AdminLTE/plugins/codemirror/mode/xml/xml.js"></script>
<script src="/static/plugins/AdminLTE/plugins/codemirror/mode/javascript/javascript.js"></script>
<script src="/static/plugins/AdminLTE/plugins/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- jquery-treegrid -->
<link rel="stylesheet" href="/static/plugins/jquery-treegrid/css/jquery.treegrid.css">
<script src="/static/plugins/jquery-treegrid/js/jquery.treegrid.js"></script>
<script src="/static/plugins/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js"></script>
{literal}
<script type="text/javascript">
$(function () {
// 跳轉頁
$(document).on('pjax:complete', function (event, xhr, textStatus, options) {
var url = xhr.getResponseHeader('X-PJAX-URL');
if (url) {
$.pjax({url: url, container: '.content-wrapper'})
}
});
// a 鏈接
$(document).pjax('a[target!=_blank]', '.content-wrapper');
// form 表單
$(document).on('submit', 'form[data-pjax]', function (event) {
$.pjax.submit(event, '.content-wrapper');
});
// 阻止超時導致的鏈接跳轉(ajax默認超時時間650毫秒，超時后強制刷新整個頁面)
$(document).on('pjax:timeout', function (event) {
event.preventDefault()
});
// 重新加載
//$.pjax.reload('.content-wrapper');
})
</script>
{/literal}
```
- 空白目錄
- php語法結構
- 安裝與更新
- 開啟調試模式及代碼跟蹤器
- 架構
- 源碼分析
- 應用初始化
- 請求流程
- 中間件源碼分析
- 請求處理源碼分析
- Request源碼分析
- 模板編譯流程
- 路由與請求流程
- 容器
- 獲取目錄位置
- 入口文件
- 多應用模式及URL訪問
- 依賴注入與容器
- 容器屬性及方法
- Container
- App
- facade
- 中間件(middleware)
- 系統服務
- extend 擴展類庫
- 筆記
- 配置
- env配置定義及獲取
- 配置文件的配置獲取
- 單應用模式-(配置)文件目錄結構(默認)
- 多應用模式(配置)文件目錄結構(配置文件)
- 配置文件
- 應用配置：app.php
- 緩存配置: cache.php
- 數據庫配置：database.php
- 路由和URL配置:route.php
- Cookie配置:cookie.php
- Session配置:session.php
- 命令行配置:console.php
- 多語言配置:lang.php
- 日志配置:log.php
- 頁面Trace配置:trace.php
- 磁盤配置： filesystem.php
- 中間件配置：middleware.php
- 視圖配置：view.php
- 改成用yaconf配置
- 事件
- 例子：省略事件類的demo
- 例子2：完整事件類
- 例子3：事件訂閱，監聽多個事件
- 解析
- 路由
- 路由定義
- 路由地址
- 變量規則
- MISS路由
- URL生成
- 閉包支持
- 路由參數
- 路由中間件
- 路由分組
- 資源路由
- 注解路由
- 路由綁定
- 域名路由
- 路由緩存
- 跨域路由
- 控制器
- 控制器定義
- 空控制器、空操作
- 空模塊處理
- RESTFul資源控制器
- 控制器中間件
- 請求對象Request(url參數)
- 請求信息
- 獲取輸入變量（$_POST、$_GET等）
- 請求類型的獲取與偽裝
- HTTP頭信息
- 偽靜態
- 參數綁定
- 請求緩存
- 響應對象Response
- 響應輸出
- 響應參數
- 重定向
- 文件下載
- 錯誤頁面的處理辦法
- 應用公共文件common.php
- 模型
- 模型定義及常規屬性
- 模型數據獲取與模型賦值
- 查詢
- 數據集
- 增加
- 修改
- 刪除
- 條件
- 查詢范圍scope
- 獲取器
- 修改器
- 搜索器
- 軟刪除
- 模型事件
- 關聯預載入
- 模型關聯
- 一對一關聯
- 一對多關聯
- 多對多關聯
- 自動時間戳
- 事務
- 數據庫
- 查詢構造器
- 查詢合集
- 子查詢
- 聚合查詢
- 時間查詢
- 視圖查詢(比join簡單)
- 獲取查詢參數
- 快捷方法
- 動態查詢
- 條件查詢
- 打印sql語句
- 增
- 刪
- 改
- 查
- 鏈式操作
- 查詢表達式
- 分頁查詢
- 原生查詢
- JSON字段
- 鏈接數據庫配置
- 分布式數據庫
- 查詢事件
- Db獲取器
- 事務操作
- 存儲過程
- Db數據集
- 數據庫驅動
- 視圖
- 模板
- 模板配置
- 模板位置
- 模板渲染
- 模板變量與賦值(assign)
- 模板輸出替換
- url生成
- 模板詳解
- 內置標簽
- 三元運算
- 變量輸出
- 函數輸出
- Request請求參數
- 模板注釋及原樣輸出
- 模板繼承
- 模板布局
- 原生PHP
- 模板引擎
- 視圖過濾
- 視圖驅動
- 驗證
- 驗證進階之最終版
- 錯誤和日志
- 異常處理
- 日志處理
- 調試
- 調試模式
- Trace調試
- SQL調試
- 變量調試
- 遠程調試
- 雜項
- 緩存
- Session
- Cookie
- 多語言
- 上傳
- 擴展說明
- N+1查詢
- TP類庫
- 擴展類庫
- 數據庫遷移工具
- Workerman
- think助手工具庫
- 驗證碼
- Swoole
- request
- app
- Response
- View
- Validate
- Config
- 命令行
- 助手函數
- 升級指導(功能的添加與刪除說明)
- siyucms
- 開始
- 添加頁面流程
- 列表頁加載流程
- 彈出框
- 基礎控制器
- 基礎模型
- 快速構建
- 表單form構建
- 表格table構建
- MakeBuilder
- 前端組件
- 日期組件
- layer 彈層組件
- Moment.js 日期處理插件
- siyucms模板布局
- 函數即其變量
- 前端頁面
- $.operate.方法
- $.modal.方法：彈出層
- $.common.方法：通用方法
- 被cms重寫的表格options
- 自定義模板
- 搜索框
- 自定義form表單
- 獲取表單搜索參數并組裝為url字符串