郭文星 / wyc.tenyes.cn · 提交

转到一个项目

作者 郭文星
提交 1a2c61213dd44433517175fe6131875f4980605f 1 个父辈 60ac9a54

123

内嵌 并排对比
正在显示 53 个修改的文件 包含 0 行增加 和 3675 行删除
{"files":["application\\admin\\controller\\example\\Bootstraptable.php","application\\admin\\controller\\example\\Colorbadge.php","application\\admin\\controller\\example\\Controllerjump.php","application\\admin\\controller\\example\\Customform.php","application\\admin\\controller\\example\\Customsearch.php","application\\admin\\controller\\example\\Cxselect.php","application\\admin\\controller\\example\\Echarts.php","application\\admin\\controller\\example\\Multitable.php","application\\admin\\controller\\example\\Relationmodel.php","application\\admin\\controller\\example\\Tablelink.php","application\\admin\\controller\\example\\Tabletemplate.php","application\\admin\\model\\Area.php","application\\admin\\view\\example\\bootstraptable\\detail.html","application\\admin\\view\\example\\bootstraptable\\edit.html","application\\admin\\view\\example\\bootstraptable\\index.html","application\\admin\\view\\example\\colorbadge\\index.html","application\\admin\\view\\example\\controllerjump\\index.html","application\\admin\\view\\example\\customform\\index.html","application\\admin\\view\\example\\customsearch\\index.html","application\\admin\\view\\example\\cxselect\\index.html","application\\admin\\view\\example\\echarts\\index.html","application\\admin\\view\\example\\multitable\\index.html","application\\admin\\view\\example\\relationmodel\\index.html","application\\admin\\view\\example\\tablelink\\index.html","application\\admin\\view\\example\\tabletemplate\\index.html","public\\assets\\js\\backend\\example\\bootstraptable.js","public\\assets\\js\\backend\\example\\colorbadge.js","public\\assets\\js\\backend\\example\\controllerjump.js","public\\assets\\js\\backend\\example\\customform.js","public\\assets\\js\\backend\\example\\customsearch.js","public\\assets\\js\\backend\\example\\cxselect.js","public\\assets\\js\\backend\\example\\echarts.js","public\\assets\\js\\backend\\example\\multitable.js","public\\assets\\js\\backend\\example\\relationmodel.js","public\\assets\\js\\backend\\example\\tablelink.js","public\\assets\\js\\backend\\example\\tabletemplate.js","public\\assets\\addons\\example\\css\\common.css","public\\assets\\addons\\example\\img\\200x200.png","public\\assets\\addons\\example\\img\\plus.png","public\\assets\\addons\\example\\js\\async.js"],"license":"regular","licenseto":"15629","licensekey":"bhPvgCDzwu3MR19F ksNc2PNUvdOFCKHwzx08FQ==","domains":["netcar123.com"],"licensecodes":[],"validations":["04fc4fb96e772ed591aa668d537fdaad"],"menus":["example","example\/bootstraptable","example\/bootstraptable\/index","example\/bootstraptable\/detail","example\/bootstraptable\/change","example\/bootstraptable\/del","example\/bootstraptable\/multi","example\/customsearch","example\/customsearch\/index","example\/customsearch\/del","example\/customsearch\/multi","example\/customform","example\/customform\/index","example\/tablelink","example\/tablelink\/index","example\/colorbadge","example\/colorbadge\/index","example\/colorbadge\/del","example\/colorbadge\/multi","example\/controllerjump","example\/controllerjump\/index","example\/controllerjump\/del","example\/controllerjump\/multi","example\/cxselect","example\/cxselect\/index","example\/cxselect\/del","example\/cxselect\/multi","example\/multitable","example\/multitable\/index","example\/multitable\/del","example\/multitable\/multi","example\/relationmodel","example\/relationmodel\/index","example\/relationmodel\/del","example\/relationmodel\/multi","example\/tabletemplate","example\/tabletemplate\/index","example\/tabletemplate\/detail","example\/tabletemplate\/del","example\/tabletemplate\/multi","example\/echarts","example\/echarts\/index"]}
\ No newline at end of file
<?php
namespace addons\example;
use app\common\library\Menu;
use think\Addons;
/**
* Example
*/
class Example extends Addons
{
/**
* 插件安装方法
* @return bool
*/
public function install()
{
$menu = [
[
'name' => 'example',
'title' => '开发示例管理',
'icon' => 'fa fa-magic',
'sublist' => [
[
'name' => 'example/bootstraptable',
'title' => '表格完整示例',
'icon' => 'fa fa-table',
'sublist' => [
['name' => 'example/bootstraptable/index', 'title' => '查看'],
['name' => 'example/bootstraptable/detail', 'title' => '详情'],
['name' => 'example/bootstraptable/change', 'title' => '变更'],
['name' => 'example/bootstraptable/del', 'title' => '删除'],
['name' => 'example/bootstraptable/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/customsearch',
'title' => '自定义搜索',
'icon' => 'fa fa-table',
'sublist' => [
['name' => 'example/customsearch/index', 'title' => '查看'],
['name' => 'example/customsearch/del', 'title' => '删除'],
['name' => 'example/customsearch/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/customform',
'title' => '自定义表单示例',
'icon' => 'fa fa-edit',
'sublist' => [
['name' => 'example/customform/index', 'title' => '查看'],
]
],
[
'name' => 'example/tablelink',
'title' => '表格联动示例',
'icon' => 'fa fa-table',
'remark' => '点击左侧日志列表，右侧的表格数据会显示指定管理员的日志列表',
'sublist' => [
['name' => 'example/tablelink/index', 'title' => '查看'],
]
],
[
'name' => 'example/colorbadge',
'title' => '彩色角标',
'icon' => 'fa fa-table',
'remark' => '左侧彩色的角标会根据当前数据量的大小进行更新',
'sublist' => [
['name' => 'example/colorbadge/index', 'title' => '查看'],
['name' => 'example/colorbadge/del', 'title' => '删除'],
['name' => 'example/colorbadge/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/controllerjump',
'title' => '控制器间跳转',
'icon' => 'fa fa-table',
'remark' => '点击IP地址可以跳转到新的选项卡中查看指定IP的数据',
'sublist' => [
['name' => 'example/controllerjump/index', 'title' => '查看'],
['name' => 'example/controllerjump/del', 'title' => '删除'],
['name' => 'example/controllerjump/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/cxselect',
'title' => '多级联动',
'icon' => 'fa fa-table',
'remark' => '基于jquery.cxselect实现的多级联动',
'sublist' => [
['name' => 'example/cxselect/index', 'title' => '查看'],
['name' => 'example/cxselect/del', 'title' => '删除'],
['name' => 'example/cxselect/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/multitable',
'title' => '多表格示例',
'icon' => 'fa fa-table',
'remark' => '展示在一个页面显示多个Bootstrap-table表格',
'sublist' => [
['name' => 'example/multitable/index', 'title' => '查看'],
['name' => 'example/multitable/del', 'title' => '删除'],
['name' => 'example/multitable/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/relationmodel',
'title' => '关联模型示例',
'icon' => 'fa fa-table',
'remark' => '列表中的头像、用户名和昵称字段均从关联表中取出',
'sublist' => [
['name' => 'example/relationmodel/index', 'title' => '查看'],
['name' => 'example/relationmodel/del', 'title' => '删除'],
['name' => 'example/relationmodel/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/tabletemplate',
'title' => '表格模板示例',
'icon' => 'fa fa-table',
'remark' => '',
'sublist' => [
['name' => 'example/tabletemplate/index', 'title' => '查看'],
['name' => 'example/tabletemplate/detail', 'title' => '详情'],
['name' => 'example/tabletemplate/del', 'title' => '删除'],
['name' => 'example/tabletemplate/multi', 'title' => '批量更新'],
]
],
[
'name' => 'example/echarts',
'title' => '统计图表示例',
'icon' => 'fa fa-bar-chart',
'sublist' => [
['name' => 'example/echarts/index', 'title' => '查看'],
]
],
]
]
];
Menu::create($menu);
return true;
}
/**
* 插件卸载方法
* @return bool
*/
public function uninstall()
{
Menu::delete('example');
return true;
}
/**
* 插件启用方法
*/
public function enable()
{
Menu::enable('example');
}
/**
* 插件禁用方法
*/
public function disable()
{
Menu::disable('example');
}
}
<?php
return [
[
'name' => 'condition1',
'title' => '条件1',
'type' => 'radio',
'group' => '选项组一',
'content' => [
'value1' => '值1',
'value2' => '值2',
],
'value' => 'value2',
'rule' => 'required',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => 'condition2',
'title' => '条件2',
'type' => 'checkbox',
'group' => '选项组一',
'visible' => 'condition1=value1',
'content' => [
'value1' => '值1',
'value2' => '值2',
'value3' => '值3',
],
'value' => 'value1,value2',
'rule' => 'required',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => 'condition3',
'title' => '条件3',
'type' => 'select',
'group' => '选项组一',
'visible' => 'condition1=value2',
'content' => [
'value1' => '值1',
'value2' => '值2',
],
'value' => 'value1',
'rule' => 'required',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => 'condition4',
'title' => '条件4',
'type' => 'selects',
'group' => '选项组一',
'content' => [
'value1' => '值1',
'value2' => '值2',
'value3' => '值3',
],
'value' => 'value1,value2',
'rule' => 'required',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => 'title',
'title' => '标题',
'type' => 'string',
'group' => '选项组一',
'visible' => 'condition3=value1',
'content' => [],
'value' => '3x',
'rule' => 'required',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => 'domain',
'title' => '绑定二级域名前缀',
'type' => 'string',
'group' => '选项组二',
'content' => [],
'value' => '',
'rule' => '',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => 'rewrite',
'title' => '伪静态',
'type' => 'array',
'group' => '选项组二',
'content' => [],
'value' => [
'index/index' => '/example$',
'demo/index' => '/example/d/[:name]',
'demo/demo1' => '/example/d1/[:name]',
'demo/demo2' => '/example/d2/[:name]',
],
'rule' => 'required',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
[
'name' => '__tips__',
'title' => '温馨提示',
'type' => 'string',
'content' => [],
'value' => '这里是提示的文本内容',
'rule' => '',
'msg' => '',
'tip' => '',
'ok' => '',
'extend' => '',
],
];
<?php
namespace addons\example\controller;
use think\addons\Controller;
/**
* 测试控制器
*/
class Demo extends Controller
{
protected $layout = 'default';
protected $noNeedLogin = ['index', 'demo1'];
protected $noNeedRight = ['*'];
public function index()
{
return $this->view->fetch();
}
public function demo1()
{
return $this->view->fetch();
}
public function demo2()
{
return $this->view->fetch();
}
}
<?php
namespace addons\example\controller;
use think\addons\Controller;
class Index extends Controller
{
protected $layout = 'default';
public function index()
{
return $this->view->fetch();
}
}
name = example
title = 开发示例
intro = FastAdmin多个开发示例
author = FastAdmin
website = https://www.fastadmin.net
version = 1.1.3
state = 1
url = /addons/example
license = regular
licenseto = 15629
此 diff 太大无法显示。
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">无需登录页面
<small>开发者示例</small>
</h1>
<ol class="breadcrumb">
<li><a href="{:addon_url('example/index/index')}">插件首页</a>
</li>
<li class="active">无需登录页面</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12">
<p class="well">当前登录页面无需登录即可查看,当前请求的name值为：{$Request.param.name|htmlentities}</p>
{if $user}
<p class="well text-danger">但是如果你登录后可以浏览到这段隐藏的信息</p>
{/if}
</div>
</div>
<!-- /.row -->
<hr>
</div>
<!-- /.container -->
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">需登录页面
<small>开发者示例</small>
</h1>
<ol class="breadcrumb">
<li><a href="{:addon_url('example/index/index')}">插件首页</a>
</li>
<li class="active">需登录页面</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12">
<p class="well">当前登录页面需要登录后才可以查看，你可以退出后再访问此页面，会提醒登录,当前请求的name值为：{$Request.param.name|htmlentities}</p>
<p class="well">你好！{$user.nickname|htmlentities}，<a href="{:url('index/user/logout')}">注销登录</a></p>
</div>
</div>
<!-- /.row -->
<hr>
</div>
<!-- /.container -->
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">使用模板标签和变量
<small>开发者示例</small>
</h1>
<ol class="breadcrumb">
<li><a href="{:addon_url('example/index/index')}">插件首页</a>
</li>
<li class="active">使用模板标签和变量</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12">
<p class="well">当前请求的name值为：{$Request.param.name|htmlentities}</p>
{literal}
<pre>
在插件视图中可以使用所有ThinkPHP5内支持的模板标签和变量，如
{$Think.server.script_name} // 输出$_SERVER['SCRIPT_NAME']变量
{$Think.session.user_id} // 输出$_SESSION['user_id']变量
{$Think.get.pageNumber} // 输出$_GET['pageNumber']变量
{$Think.cookie.name} // 输出$_COOKIE['name']变量
// 调用Request对象的get方法 传入参数为id
{$Request.get.id}
// 调用Request对象的param方法 传入参数为name
{$Request.param.name}
// 调用Request对象的param方法 传入参数为user.nickname
{$Request.param.user.nickname}
// 调用Request对象的root方法
{$Request.root}
// 调用Request对象的root方法，并且传入参数true
{$Request.root.true}
// 调用Request对象的path方法
{$Request.path}
// 调用Request对象的module方法
{$Request.module}
// 调用Request对象的controller方法
{$Request.controller}
// 调用Request对象的action方法
{$Request.action}
// 调用Request对象的ext方法
{$Request.ext}
// 调用Request对象的host方法
{$Request.host}
// 调用Request对象的ip方法
{$Request.ip}
// 调用Request对象的header方法
{$Request.header.accept-encoding}
</pre>
{/literal}
</div>
</div>
<!-- /.row -->
<hr>
</div>
<!-- /.container -->
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<a href="javascript:">
<div class="fill" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOTMiIGhlaWdodD0iMjI2Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoNjMsIDE0MywgODUpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjE0MTMzMzMzMzMzMzMzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAtMzcuODMzMzMzMzMzMzMzKSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjZGRkIiBmaWxsLW9wYWNpdHk9IjAuMTQxMzMzMzMzMzMzMzMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDE4OS4xNjY2NjY2NjY2Nykgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjUuNTI5MjU1NTUzMDIzLCAtMzcuODMzMzMzMzMzMzMzKSByb3RhdGUoMCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjUuNTI5MjU1NTUzMDIzLCAxODkuMTY2NjY2NjY2NjcpIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY3IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzEuMDU4NTExMTA2MDUsIC0zNy44MzMzMzMzMzMzMzMpIHJvdGF0ZSgxODAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiMyMjIiIGZpbGwtb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzMS4wNTg1MTExMDYwNSwgMTg5LjE2NjY2NjY2NjY3KSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDQ2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYuNTg3NzY2NjU5MDcsIC0zNy44MzMzMzMzMzMzMzMpIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDQ2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYuNTg3NzY2NjU5MDcsIDE4OS4xNjY2NjY2NjY2Nykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2Mi4xMTcwMjIyMTIwOSwgLTM3LjgzMzMzMzMzMzMzMykgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjYyLjExNzAyMjIxMjA5LCAxODkuMTY2NjY2NjY2NjcpIHJvdGF0ZSgxODAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4xNDEzMzMzMzMzMzMzMyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI3LjY0NjI3Nzc2NTExLCAtMzcuODMzMzMzMzMzMzMzKSByb3RhdGUoMCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjE0MTMzMzMzMzMzMzMzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjcuNjQ2Mjc3NzY1MTEsIDE4OS4xNjY2NjY2NjY2Nykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4wMiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwgMCkgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiMyMjIiIGZpbGwtb3BhY2l0eT0iMC4wMjg2NjY2NjY2NjY2NjciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY1LjUyOTI1NTU1MzAyMywgMCkgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzEuMDU4NTExMTA2MDUsIDApIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY3IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYuNTg3NzY2NjU5MDcsIDApIHJvdGF0ZSgxODAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiMyMjIiIGZpbGwtb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2Mi4xMTcwMjIyMTIwOSwgMCkgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4wMiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI3LjY0NjI3Nzc2NTExLCAwKSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY3IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAzNy44MzMzMzMzMzMzMzMpIHJvdGF0ZSgxODAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4wMiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMpIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDk4IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzEuMDU4NTExMTA2MDUsIDM3LjgzMzMzMzMzMzMzMykgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjE1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYuNTg3NzY2NjU5MDcsIDM3LjgzMzMzMzMzMzMzMykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiMyMjIiIGZpbGwtb3BhY2l0eT0iMC4wMjg2NjY2NjY2NjY2NjciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2Mi4xMTcwMjIyMTIwOSwgMzcuODMzMzMzMzMzMzMzKSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDQ2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjcuNjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4wMzczMzMzMzMzMzMzMzMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDc1LjY2NjY2NjY2NjY2Nykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4wMiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjUuNTI5MjU1NTUzMDIzLCA3NS42NjY2NjY2NjY2NjcpIHJvdGF0ZSgxODAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiMyMjIiIGZpbGwtb3BhY2l0eT0iMC4xNSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMxLjA1ODUxMTEwNjA1LCA3NS42NjY2NjY2NjY2NjcpIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjZGRkIiBmaWxsLW9wYWNpdHk9IjAuMDIiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Ni41ODc3NjY2NTkwNywgNzUuNjY2NjY2NjY2NjY3KSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDk4IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjIuMTE3MDIyMjEyMDksIDc1LjY2NjY2NjY2NjY2Nykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiMyMjIiIGZpbGwtb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNy42NDYyNzc3NjUxMSwgNzUuNjY2NjY2NjY2NjY3KSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjZGRkIiBmaWxsLW9wYWNpdHk9IjAuMTI0IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAxMTMuNSkgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjE1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NS41MjkyNTU1NTMwMjMsIDExMy41KSByb3RhdGUoMCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjEyNCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMxLjA1ODUxMTEwNjA1LCAxMTMuNSkgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY3IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYuNTg3NzY2NjU5MDcsIDExMy41KSByb3RhdGUoMCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjEyNCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjYyLjExNzAyMjIxMjA5LCAxMTMuNSkgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY3IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjcuNjQ2Mjc3NzY1MTEsIDExMy41KSByb3RhdGUoMCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iI2RkZCIgZmlsbC1vcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY3IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAxNTEuMzMzMzMzMzMzMzMpIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NS41MjkyNTU1NTMwMjMsIDE1MS4zMzMzMzMzMzMzMykgcm90YXRlKDE4MCwgMzIuNzY0NjI3Nzc2NTExLCAzNy44MzMzMzMzMzMzMzMpIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwgMCwgNjUuNTI5MjU1NTUzMDIzLCAzNy44MzMzMzMzMzMzMzMsIDAsIDc1LjY2NjY2NjY2NjY2NywgMCwgMCIgZmlsbD0iIzIyMiIgZmlsbC1vcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utb3BhY2l0eT0iMC4wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMxLjA1ODUxMTEwNjA1LCAxNTEuMzMzMzMzMzMzMzMpIHJvdGF0ZSgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjZGRkIiBmaWxsLW9wYWNpdHk9IjAuMDIiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Ni41ODc3NjY2NTkwNywgMTUxLjMzMzMzMzMzMzMzKSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48cG9seWxpbmUgcG9pbnRzPSIwLCAwLCA2NS41MjkyNTU1NTMwMjMsIDM3LjgzMzMzMzMzMzMzMywgMCwgNzUuNjY2NjY2NjY2NjY3LCAwLCAwIiBmaWxsPSIjMjIyIiBmaWxsLW9wYWNpdHk9IjAuMDk4IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjAyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjIuMTE3MDIyMjEyMDksIDE1MS4zMzMzMzMzMzMzMykgcm90YXRlKDAsIDMyLjc2NDYyNzc3NjUxMSwgMzcuODMzMzMzMzMzMzMzKSIvPjxwb2x5bGluZSBwb2ludHM9IjAsIDAsIDY1LjUyOTI1NTU1MzAyMywgMzcuODMzMzMzMzMzMzMzLCAwLCA3NS42NjY2NjY2NjY2NjcsIDAsIDAiIGZpbGw9IiNkZGQiIGZpbGwtb3BhY2l0eT0iMC4xMjQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNy42NDYyNzc3NjUxMSwgMTUxLjMzMzMzMzMzMzMzKSByb3RhdGUoMTgwLCAzMi43NjQ2Mjc3NzY1MTEsIDM3LjgzMzMzMzMzMzMzMykiLz48L3N2Zz4=');"></div>
<div class="carousel-body">
<div class="container">
<h1 class="display-1 text-white">开发示例</h1>
<h2 class="display-4 text-white">表格、登录相关示例</h2>
</div>
</div>
</a>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">
基础模块
</h2>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-user"></i> 前台模块</h4>
</div>
<div class="panel-body">
<p>前台模块中包含基础的会员模块，前台模块中的会员账号和API模块中的会员账号是同一账号体系</p>
<a href="{:url('index/index/index')}" target="_blank" class="btn btn-primary">立即访问</a>
<a href="{:url('index/user/index')}" target="_blank" class="btn btn-default">会员中心</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i> API模块</h4>
</div>
<div class="panel-body">
<p>API模块中包含基础的会员模块，初始化模块、短信发送模块、验证模块</p>
<a href="{:url('api/index/index')}" target="_blank" class="btn btn-primary">立即访问</a>
<a href="{:url('api/common/init')}?version=1.0.0" target="_blank" class="btn btn-default">初始化接口</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-compass"></i> API文档</h4>
</div>
<div class="panel-body">
<p>当写完API接口以后，可通过执行php think api一键生成我们所需要的API文档，并且可以直接在线测试</p>
<a href="{:url('/')}api.html" target="_blank" class="btn btn-primary">立即访问</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">
功能示例
</h2>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-check"></i> 使用模板标签和变量</h4>
</div>
<div class="panel-body">
<a href="{:addon_url('example/demo/index',[':name'=>'s1'])}" class="btn btn-success">查看示例</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i> 访问不需要登录的页面</h4>
</div>
<div class="panel-body">
<a href="{:addon_url('example/demo/demo1',[':name'=>'s2'])}" class="btn btn-success">立即访问</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-compass"></i> 访问需要登录的页面</h4>
</div>
<div class="panel-body">
<a href="{:addon_url('example/demo/demo2',[':name'=>'s3'])}" class="btn btn-success">立即访问</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>开发示例 - {$site.name|htmlentities}</title>
<!-- Bootstrap Core CSS -->
<link href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="__ADDON__/css/common.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="__CDN__/assets/js/html5shiv.js"></script>
<script src="__CDN__/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{:addon_url('example/index/index')}">{$site.name|htmlentities}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="{:addon_url('example/index/index')}">插件首页</a>
</li>
<li>
<a href="{:addon_url('example/demo/demo1', [':name'=>'s1'])}">无需登录页面</a>
</li>
<li>
<a href="{:addon_url('example/demo/demo2', [':name'=>'s2'])}">需登录页面</a>
</li>
{if $user}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">欢迎你! {$user.nickname|htmlentities}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="{:url('index/user/index')}">会员中心</a>
</li>
<li>
<a href="{:url('index/user/profile')}">个人资料</a>
</li>
<li>
<a href="{:url('index/user/logout')}">退出登录</a>
</li>
</ul>
</li>
{else /}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">会员中心 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="{:url('index/user/login')}">登录</a>
</li>
<li>
<a href="{:url('index/user/register')}">注册</a>
</li>
</ul>
</li>
{/if}
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
{__CONTENT__}
<div class="container">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright &copy; {$site.name|htmlentities} 2024</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 表格完整示例
*
* @icon fa fa-table
* @remark 在使用Bootstrap-table中的常用方式,更多使用方式可查看:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
*/
class Bootstraptable extends Backend
{
/**
* @var \app\admin\model\AdminLog
*/
protected $model = null;
/**
* 无需鉴权的方法(需登录)
* @var array
*/
protected $noNeedRight = ['start', 'pause', 'change', 'detail', 'cxselect', 'searchlist', 'selectpage'];
/**
* 快捷搜索的字段
* @var string
*/
protected $searchFields = 'id,title,url';
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
/**
* 查看
*/
public function index()
{
if ($this->request->isAjax()) {
list($where, $sort, $order, $offset, $limit) = $this->buildparams(null);
$list = $this->model
->where($where)
->order($sort, $order)
->limit($offset, $limit)
->paginate($limit);
$result = array("total" => $list->total(), "rows" => $list->items(), "extend" => ['money' => mt_rand(100000, 999999), 'price' => 200]);
return json($result);
}
return $this->view->fetch();
}
/**
* 详情
*/
public function detail($ids)
{
$row = $this->model->get(['id' => $ids]);
if (!$row) {
$this->error(__('No Results were found'));
}
if ($this->request->isAjax()) {
$this->success("Ajax请求成功", null, ['id' => $ids]);
}
$this->view->assign("row", $row->toArray());
return $this->view->fetch();
}
/**
* 启用
*/
public function start($ids = '')
{
$this->success("模拟启动成功");
}
/**
* 暂停
*/
public function pause($ids = '')
{
$this->success("模拟暂停成功");
}
/**
* 切换
*/
public function change($ids = '')
{
//你需要在此做具体的操作逻辑
$this->success("模拟切换成功");
}
/**
* 联动搜索
*/
public function cxselect()
{
$type = $this->request->get('type');
$group_id = $this->request->get('group_id');
$list = null;
if ($group_id !== '') {
if ($type == 'group') {
$groupIds = $this->auth->getChildrenGroupIds(true);
$list = \app\admin\model\AuthGroup::where('id', 'in', $groupIds)->field('id as value, name')->select();
} else {
$adminIds = \app\admin\model\AuthGroupAccess::where('group_id', 'in', $group_id)->column('uid');
$list = \app\admin\model\Admin::where('id', 'in', $adminIds)->field('id as value, username AS name')->select();
}
}
$this->success('', null, $list);
}
/**
* 搜索下拉列表
*/
public function searchlist()
{
$result = $this->model->limit(10)->select();
$searchlist = [];
foreach ($result as $key => $value) {
$searchlist[] = ['id' => $value['url'], 'name' => $value['url']];
}
$data = ['searchlist' => $searchlist];
$this->success('', null, $data);
}
public function selectpage()
{
$this->model = new \app\admin\model\AdminLog;
return parent::selectpage();
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 彩色角标
*
* @icon fa fa-table
* @remark 在JS端控制角标的显示与隐藏,请注意左侧菜单栏角标的数值变化
*/
class Colorbadge extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 控制器间跳转
*
* @icon fa fa-table
* @remark FastAdmin支持在控制器间跳转,点击后将切换到另外一个TAB中,无需刷新当前页面
*/
class Controllerjump extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
}
<?php
namespace app\admin\controller\example;
use app\admin\model\AdminLog;
use app\common\controller\Backend;
/**
* 自定义表单示例
*
* @icon fa fa-table
* @remark FastAdmin支持在控制器间跳转,点击后将切换到另外一个TAB中,无需刷新当前页面
*/
class Customform extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
public function index()
{
if ($this->request->isPost()) {
$this->success("提交成功", null, ['data' => json_encode($this->request->post("row/a"), JSON_UNESCAPED_UNICODE)]);
}
return $this->view->fetch();
}
public function get_title_list()
{
$query = $this->request->get("query");
$suggestions = AdminLog::where('title', 'like', '%' . $query . '%')->limit(10)->column("title");
$result = [
'query' => $query,
'suggestions' => $suggestions
];
return json($result);
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 自定义搜索
*
* @icon fa fa-search
* @remark 自定义列表的搜索
*/
class Customsearch extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
$ipList = $this->model->whereTime('createtime', '-37 days')->group("ip")->column("ip,ip as aa");
$this->view->assign("ipList", $ipList);
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 多级联动
*
* @icon fa fa-table
* @remark FastAdmin使用了jQuery-cxselect实现多级联动,更多文档请参考https://github.com/karsonzhang/cxSelect
*/
class Cxselect extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 统计图表示例
*
* @icon fa fa-charts
* @remark 展示在FastAdmin中使用Echarts展示丰富多彩的统计图表
*/
class Echarts extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
/**
* 查看
*/
public function index()
{
return $this->view->fetch();
}
/**
* 详情
*/
public function detail($ids)
{
$row = $this->model->get(['id' => $ids]);
if (!$row) {
$this->error(__('No Results were found'));
}
$this->view->assign("row", $row->toArray());
return $this->view->fetch();
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 多表格示例
*
* @icon fa fa-table
* @remark 当一个页面上存在多个Bootstrap-table时该如何控制按钮和表格
*/
class Multitable extends Backend
{
protected $model = null;
protected $noNeedRight = ['table1', 'table2'];
public function _initialize()
{
parent::_initialize();
}
/**
* 查看
*/
public function index()
{
$this->loadlang('general/attachment');
$this->loadlang('general/crontab');
return $this->view->fetch();
}
public function table1()
{
$this->model = model('Attachment');
//设置过滤方法
$this->request->filter(['strip_tags']);
if ($this->request->isAjax()) {
//如果发送的来源是Selectpage，则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$total = $this->model
->where($where)
->field('id,filename,filesize,imagewidth,imageheight,mimetype')
->order($sort, $order)
->count();
$list = $this->model
->where($where)
->field('id,filename,filesize,imagewidth,imageheight,mimetype')
->order($sort, $order)
->limit($offset, $limit)
->select();
$result = array("total" => $total, "rows" => $list);
return json($result);
}
return $this->view->fetch('index');
}
public function table2()
{
$this->model = model('AdminLog');
//设置过滤方法
$this->request->filter(['strip_tags']);
if ($this->request->isAjax()) {
//如果发送的来源是Selectpage，则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$total = $this->model
->where($where)
->order($sort, $order)
->count();
$list = $this->model
->where($where)
->order($sort, $order)
->limit($offset, $limit)
->select();
$result = array("total" => $total, "rows" => $list);
return json($result);
}
return $this->view->fetch('index');
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 关联模型
*
* @icon fa fa-table
* @remark 当使用到关联模型时需要重载index方法
*/
class Relationmodel extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
/**
* 查看
*/
public function index()
{
$this->relationSearch = true;
$this->searchFields = "admin.username,id";
if ($this->request->isAjax()) {
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$list = $this->model
->with("admin")
->where($where)
->order($sort, $order)
->paginate($limit);
$result = array("total" => $list->total(), "rows" => $list->items());
return json($result);
}
return $this->view->fetch();
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 表格联动
* 点击左侧日志列表，右侧的表格数据会显示指定管理员的日志列表
* @icon fa fa-table
*/
class Tablelink extends Backend
{
protected $model = null;
protected $noNeedRight = ['table1', 'table2'];
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
public function table1()
{
$this->model = model('Admin');
//设置过滤方法
$this->request->filter(['strip_tags']);
if ($this->request->isAjax()) {
//如果发送的来源是Selectpage，则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$total = $this->model
->where($where)
->field('id,username')
->order($sort, $order)
->count();
$list = $this->model
->where($where)
->field('id,username')
->order($sort, $order)
->limit($offset, $limit)
->select();
$result = array("total" => $total, "rows" => $list);
return json($result);
}
return $this->view->fetch('index');
}
public function table2()
{
$this->model = model('AdminLog');
//设置过滤方法
$this->request->filter(['strip_tags']);
if ($this->request->isAjax()) {
//如果发送的来源是Selectpage，则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$total = $this->model
->where($where)
->order($sort, $order)
->count();
$list = $this->model
->where($where)
->order($sort, $order)
->limit($offset, $limit)
->select();
$result = array("total" => $total, "rows" => $list);
return json($result);
}
return $this->view->fetch('index');
}
}
<?php
namespace app\admin\controller\example;
use app\common\controller\Backend;
/**
* 表格模板示例
*
* @icon fa fa-table
* @remark 可以通过使用表格模板将表格中的行渲染成一样的展现方式，基于此功能可以任意定制自己想要的展示列表
*/
class Tabletemplate extends Backend
{
protected $model = null;
public function _initialize()
{
parent::_initialize();
$this->model = model('AdminLog');
}
/**
* 查看
*/
public function index()
{
if ($this->request->isAjax()) {
list($where, $sort, $order, $offset, $limit) = $this->buildparams(null);
$total = $this->model
->where($where)
->order($sort, $order)
->count();
$list = $this->model
->where($where)
->order($sort, $order)
->limit($offset, $limit)
->select();
$result = array("total" => $total, "rows" => $list);
return json($result);
}
return $this->view->fetch();
}
/**
* 详情
*/
public function detail($ids)
{
$row = $this->model->get(['id' => $ids]);
if (!$row) {
$this->error(__('No Results were found'));
}
$this->view->assign("row", $row->toArray());
return $this->view->fetch();
}
}
<?php
namespace app\admin\model;
use think\Model;
class Area extends Model
{
// 开启自动写入时间戳字段
protected $autoWriteTimestamp = false;
// 定义时间戳字段名
protected $createTime = false;
protected $updateTime = false;
}
<table class="table table-striped">
<thead>
<tr>
<th>{:__('Title')}</th>
<th>{:__('Content')}</th>
</tr>
</thead>
<tbody>
{volist name="row" id="vo" }
<tr>
<td>{$key}</td>
<td style="word-break: break-all;">{$vo|htmlentities}</td>
</tr>
{/volist}
{if $Think.get.dialog}
<tr>
<td>回传数据</td>
<td>
<div class="input-group">
<input name="callback" class="form-control" value="test" />
<span class="input-group-btn"><a href="javascript:;" class="btn btn-success btn-callback" >回传数据</a></span>
</div>
</td>
</tr>
{/if}
</tbody>
</table>
<div class="hide layer-footer">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}</button>
</div>
</div>
<table class="table table-striped">
<tbody>
<tr><td>这里是编辑窗口</td></tr>
</tbody>
</table>
<div class="hide layer-footer">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}</button>
</div>
</div>
<div class="panel panel-default panel-intro">
<div class="panel-heading">
{:build_heading(null,FALSE)}
<ul class="nav nav-tabs nav-custom-condition">
<li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
<li class=""><a href="#t-1" data-value='1' data-toggle="tab">自定义搜索条件1</a></li>
<li class=""><a href="#t-2" data-value='2' data-toggle="tab">自定义搜索条件2</a></li>
</ul>
</div>
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh,delete')}
<a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a>
<div class="dropdown btn-group">
<a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> <?= __('More') ?></a>
<ul class="dropdown-menu text-left" role="menu">
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
</ul>
</div>
<a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> 自定义搜索</a>
<a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/start" href="javascript:;"><i class="fa fa-play"></i> 启动</a>
<a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/pause" href="javascript:;"><i class="fa fa-pause"></i> 暂停</a>
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
<span class="extend">
金额：<span id="money">0</span>
单价：<span id="price">0</span>
</span>
</a>
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<script id="categorytpl" type="text/html">
<div class="row">
<div class="col-xs-12">
<div class="form-inline" data-toggle="cxselect" data-selects="group,admin">
<select class="group form-control" name="group" data-url="example/bootstraptable/cxselect?type=group"></select>
<select class="admin form-control" name="admin_id" data-url="example/bootstraptable/cxselect?type=admin" data-query-name="group_id"></select>
<input type="hidden" class="operate" data-name="admin_id" value="=" />
</div>
</div>
</div>
</script>
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh,delete')}
</div>
<table id="table" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh,delete')}
</div>
<table id="table" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<style>
.upload-image {
background: url('__CDN__/assets/addons/example/img/plus.png') no-repeat center center;
background-size: 30px 30px;
height: 30px;
width: 30px;
border: 1px solid #ccc;
}
textarea.form-control {
background: #eee;
}
</style>
<div class="row">
<div class="col-md-6">
<div class="box box-success">
<div class="panel-heading">
{:__('自定义图片描述')}
</div>
<div class="panel-body">
<div class="alert alert-success-light">
<b>温馨提示</b><br>
默认我们的多图是没有图片描述的，如果我们需要自定义描述，可以使用以下的自定义功能<br>
特别注意的是图片的url和描述是分开储存的，也就是说图片一个字段，描述一个字段，你在前台使用时需要自己匹配映射关系<br>
<b>下面的演示textarea为了便于调试，设置为可见的，实际使用中应该添加个hidden的class进行隐藏</b>
</div>
<form id="first-form" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group row">
<label class="control-label col-xs-12">{:__('一维数组示例')}:</label>
<div class="col-xs-12">
<div class="input-group">
<input id="c-files" data-rule="required" class="form-control" size="50" name="row[files]" type="text" value="https://cdn.fastadmin.net/uploads/addons/blog.png,https://cdn.fastadmin.net/uploads/addons/cms.png,https://cdn.fastadmin.net/uploads/addons/vote.png">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="c-files" data-mimetype="*" data-multiple="true" data-preview-id="p-files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="c-files" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-files"></span>
</div>
<!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
<ul class="row list-inline plupload-preview" id="p-files" data-template="introtpl" data-name="row[intro]"></ul>
<!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[intro]" class="form-control" style="margin-top:5px;">["简洁响应式博客","CMS内容管理系统","在线投票系统"]</textarea>
<!--这里自定义图片预览的模板 开始-->
<script type="text/html" id="introtpl">
<li class="col-xs-3">
<a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
<img src="<%=fullurl%>" class="img-responsive">
</a>
<input type="text" name="row[intro][<%=index%>]" class="form-control mb-1" placeholder="请输入文件描述" value="<%=value?value:''%>"/>
<a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
</li>
</script>
<!--这里自定义图片预览的模板 结束-->
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12">{:__('二维数组示例')}:</label>
<div class="col-xs-12">
<div class="input-group">
<input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text" value="https://cdn.fastadmin.net/uploads/addons/example.png,https://cdn.fastadmin.net/uploads/addons/upyun.png,https://cdn.fastadmin.net/uploads/addons/alioss.png">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-images"></span>
</div>
<!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
<ul class="row list-inline plupload-preview" id="p-images" data-template="desctpl" data-name="row[desc]"></ul>
<!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[desc]" class="form-control" style="margin-top:5px;">[{"info":"开发者示例插件","size":"1M"},{"info":"又拍云储存整合","size":"2M"},{"info":"阿里OSS云储存","size":"1M"}]</textarea>
<!--这里自定义图片预览的模板 开始-->
<script type="text/html" id="desctpl">
<li class="col-xs-3">
<a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
<img src="<%=fullurl%>" class="img-responsive">
</a>
<input type="text" name="row[desc][<%=index%>][info]" class="form-control mb-1" placeholder="请输入插件描述" value="<%=value?value['info']:''%>"/>
<input type="text" name="row[desc][<%=index%>][size]" class="form-control mb-1" placeholder="请输入插件大小" value="<%=value?value['size']:''%>"/>
<a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
</li>
</script>
<!--这里自定义图片预览的模板 结束-->
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12"></label>
<div class="col-xs-12">
<button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-info">
<div class="panel-heading">
{:__('自定义Fieldlist示例')}
</div>
<div class="panel-body">
<div class="alert alert-danger-light">
<b>温馨提示</b><br>
默认的fieldlist为键值形式，如果需要一维数组或二维数组，可使用下面的自定义模板来实现<br>
默认追加的元素是没有进行事件绑定的，我们需要监听btn-append这个按钮的fa.event.appendfieldlist事件<br>
<b>下面的演示textarea为了便于调试，设置为可见的，实际使用中应该添加个hidden的class进行隐藏</b>
</div>
<form id="second-form" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group row">
<label class="control-label col-xs-12">
{:__('Fieldlist一维示例')}:
<span style="font-weight: normal"><font color="red">只支持FastAdmin1.5.0+</font> {if version_compare($Think.config.fastadmin.version, '1.5.0')<0}<span class="label label-danger">你当前FastAdmin版本不支持</span>{/if}</span>
</label>
<div class="col-xs-12">
<dl class="list-unstyled fieldlist" data-template="singletpl" data-name="row[single]" id="single-table">
<dd>
<ins>{:__('标题')}</ins>
</dd>
<dd>
<ins><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></ins>
</dd>
</dl>
<!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[single]" class="form-control" cols="30" rows="5">["你好","世界"]</textarea>
<script id="singletpl" type="text/html">
<dd class="form-inline">
<ins><input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" size="15" value="<%=row%>" placeholder="标题"/></ins>
<ins>
<!--下面的两个按钮务必保留-->
<span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
</ins>
</dd>
</script>
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12">{:__('Fieldlist一维键值示例')}:</label>
<div class="col-xs-12">
<dl class="list-unstyled fieldlist" data-name="row[keyvalue]" id="keyvalue-table">
<dd>
<ins>{:__('标题')}</ins>
</dd>
<dd>
<ins><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></ins>
</dd>
</dl>
<!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[keyvalue]" class="form-control" cols="30" rows="5">{"2":"Hello", "1":"World"}</textarea>
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12">{:__('Fieldlist二维数组示例')}:</label>
<div class="col-xs-12">
<table class="table fieldlist" data-template="basictpl" data-name="row[basic]" id="first-table">
<tr>
<td>{:__('标题')}</td>
<td>{:__('介绍')}</td>
<td>{:__('大小')}</td>
<td>{:__('状态')}</td>
<td width="100"></td>
</tr>
<tr>
<td colspan="5"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></td>
</tr>
</table>
<!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[basic]" class="form-control" cols="30" rows="5">[{"title":"开发者示例插件","intro":"开发者必备","size":"1M","state":1},{"title":"又拍云储存整合","intro":"一款云储存插件","size":"2M","state":0},{"title":"阿里OSS云储存","intro":"一款云储存插件","size":"1M","state":1}]</textarea>
<script id="basictpl" type="text/html">
<tr class="form-inline">
<td><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" size="15" value="<%=row.title||'fast'%>" placeholder="标题"/></td>
<td><input type="text" name="<%=name%>[<%=index%>][intro]" class="form-control" size="15" value="<%=row.intro%>" placeholder="介绍"/></td>
<td><input type="text" name="<%=name%>[<%=index%>][size]" class="form-control" style="width:50px" value="<%=row.size%>" placeholder="大小"/></td>
<td>
<input type="hidden" name="<%=name%>[<%=index%>][state]" id="c-state-<%=index%>" class="form-control" style="width:50px" value="<%=row.state%>" placeholder="状态"/>
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-state-<%=index%>" data-yes="1" data-no="0">
<i class="fa fa-toggle-on text-success <%if(row.state!=1){%>fa-flip-horizontal text-gray<%}%> fa-2x"></i>
</a>
</td>
<td>
<!--下面的两个按钮务必保留-->
<span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
</td>
</tr>
</script>
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12">{:__('Fieldlist绑定事件示例')}:</label>
<div class="col-xs-12">
<table class="table fieldlist" data-template="eventtpl" data-name="row[event]" id="second-table">
<tr>
<td>{:__('管理员')}</td>
<td>{:__('图片')}</td>
<td>{:__('登录时间')}</td>
<td width="100"></td>
</tr>
<tr>
<td colspan="4"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></td>
</tr>
</table>
<!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[event]" class="form-control" cols="30" rows="5">[{"id":"1","image":"/assets/addons/example/img/200x200.png","time":"2019-06-28 12:05:03"}]</textarea>
<script id="eventtpl" type="text/html">
<tr class="form-inline">
<td><input type="text" name="<%=name%>[<%=index%>][id]" class="form-control selectpage" data-source="auth/admin/selectpage" data-field="username" value="<%=row.id%>" placeholder="管理员"/></td>
<td>
<input type="hidden" name="<%=name%>[<%=index%>][image]" id="c-image-<%=index%>" value="<%=row.image%>">
<!--@formatter:off-->
<button type="button" id="faupload-image" class="btn btn-danger faupload upload-image" data-input-id="c-image-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" <%if(row.image){%>style="background-image: url('<%=Fast.api.cdnurl(row.image)%>')"<%}%>></button>
<!--@formatter:on-->
</td>
<td><input type="text" name="<%=name%>[<%=index%>][time]" class="form-control datetimepicker" style="width:120px" value="<%=row.time%>" placeholder="时间"/></td>
<td>
<!--下面的两个按钮务必保留-->
<span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
</td>
</tr>
</script>
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12"></label>
<div class="col-xs-12">
<button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-warning">
<div class="panel-heading">
自动完成+标签输入示例，<font color="red">只支持FastAdmin1.3.0+</font> {if version_compare($Think.config.fastadmin.version, '1.3.0')<0}<span class="label label-danger">你当前FastAdmin版本不支持</span>{/if}
</div>
<div class="panel-body">
<div class="alert alert-danger-light">
<b>温馨提示</b><br>
</div>
<form id="third-form" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group row">
<label class="control-label col-xs-12">自动完成</label>
<div class="col-xs-12">
<input type="text" class="form-control" data-role="autocomplete" data-autocomplete-options='{"url":"example/customform/get_title_list", "minChars":1}'/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12">标签输入 <span class="text-muted small">输入后<code>回车</code>或<code>,</code>确认</span></label>
<div class="col-xs-12">
<input type="text" class="form-control" data-role="tagsinput"/>
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12">自动完成+标签输入</label>
<div class="col-xs-12">
<input type="text" class="form-control" data-role="tagsinput" data-tagsinput-options='{"minChars":1, "autocomplete":{"url":"example/customform/get_title_list"}}'/>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-danger">
<div class="panel-heading">
动态显示，<font color="red">只支持FastAdmin1.3.3+</font> {if version_compare($Think.config.fastadmin.version, '1.3.3')<0}<span class="label label-danger">你当前FastAdmin版本不支持</span>{/if}
</div>
<div class="panel-body">
<form id="fourth-form" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group row">
<label class="control-label col-xs-12">常规使用</label>
<div class="col-xs-12">
<input type="radio" name="row[type]" value="value1" checked/> 类型1
<input type="radio" name="row[type]" value="value2"/> 类型2
<div data-favisible="type=value1" class="p-3">显示内容1</div>
<div data-favisible="type=value2" class="p-3">显示内容2</div>
</div>
</div>
<hr>
<div class="form-group row">
<label class="control-label col-xs-12">使用开关组件</label>
<div class="col-xs-12">
<input id="c-switch" name="row[switch]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0">
<i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
</a>
<div data-favisible="switch=1" class="p-3">显示内容隐藏的内容</div>
</div>
</div>
<hr>
<div class="form-group row">
<label class="control-label col-xs-12">组件嵌套</label>
<div class="col-xs-12">
<input type="radio" name="row[mode]" value="value1"/> 模式1
<input type="radio" name="row[mode]" value="value2"/> 模式2
<div data-favisible="mode=value1" class="p-3">
<h4>显示内容1</h4>
<input id="c-switch1" name="row[switch1]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch1" data-yes="1" data-no="0">
<i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
</a>
<div data-favisible="switch1=1" class="p-3">显示内容隐藏的内容1</div>
</div>
<div data-favisible="mode=value2" class="p-3">
<h4>显示内容2</h4>
<input id="c-switch2" name="row[switch2]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch2" data-yes="1" data-no="0">
<i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
</a>
<div data-favisible="switch2=1" class="p-3">显示内容隐藏的内容2</div>
</div>
</div>
</div>
<hr>
<div class="form-group row">
<label class="control-label col-xs-12">使用内容判断 <span class="text-muted small">只有输入指定的内容才显示</span></label>
<div class="col-xs-12">
<input type="text" class="form-control" name="row[title]" placeholder="请输入abc三个字母">
<div data-favisible="title=abc" class="p-3">显示内容隐藏的内容</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh')}
</div>
<table id="table" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<script id="customformtpl" type="text/html">
<!--form表单必须添加form-commsearch这个类-->
<form action="" class="form-commonsearch">
<div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
<h4>自定义搜索表单</h4>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">ID</label>
<!--显式的operate操作符-->
<div class="input-group">
<div class="input-group-btn">
<select class="form-control operate" data-name="id" style="width:60px;">
<option value="=" selected>等于</option>
<option value=">">大于</option>
<option value="<">小于</option>
</select>
</div>
<input class="form-control" type="text" name="id" placeholder="" value=""/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">标题</label>
<!--隐式的operate操作符，必须携带一个class为operate隐藏的文本框,且它的data-name="字段",值为操作符-->
<input class="operate" type="hidden" data-name="title" value="="/>
<div>
<input class="form-control" type="text" name="title" placeholder="请输入查找的标题" value=""/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">管理员ID</label>
<div class="row" data-toggle="cxselect" data-selects="group,admin">
<div class="col-xs-6">
<select class="group form-control" name="group"
data-url="example/bootstraptable/cxselect?type=group"></select>
</div>
<div class="col-xs-6">
<select class="admin form-control" name="admin_id"
data-url="example/bootstraptable/cxselect?type=admin"
data-query-name="group_id"></select>
</div>
<input type="hidden" class="operate" data-name="admin_id" value="="/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">用户名</label>
<input type="hidden" class="operate" data-name="username" value="="/>
<div>
<input id="c-category_id" data-source="auth/admin/index" data-primary-key="username"
data-field="username" class="form-control selectpage" name="username" type="text"
value="" style="display:block;">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="min-height:68px;">
<!--这里添加68px是为了避免刷新时出现元素错位闪屏-->
<div class="form-group">
<label class="control-label">IP</label>
<input type="hidden" class="operate" data-name="ip" value="in"/>
<div>
<!--给select一个固定的高度-->
<!--@formatter:off-->
<select id="c-flag" class="form-control selectpicker" multiple name="ip" style="height:31px;">
{foreach name="ipList" item="vo"}
<option value="{$key}" {in name="key" value="" }selected{/in}>{$vo}</option>
{/foreach}
</select>
<!--@formatter:on-->
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label">创建时间</label>
<input type="hidden" class="operate" data-name="createtime" value="RANGE"/>
<div>
<input type="text" class="form-control datetimerange" name="createtime" value=""/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group">
<label class="control-label"></label>
<div class="row">
<div class="col-xs-6">
<input type="submit" class="btn btn-success btn-block" value="提交"/>
</div>
<div class="col-xs-6">
<input type="reset" class="btn btn-primary btn-block" value="重置"/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</script>
<style>#cxselect-example textarea{margin:10px 0;}</style>
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding" id="cxselect-example">
<form id="cxselectform" action="">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><b>省市区联动</b>(通过AJAX读取数据)</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-9">
<div class="form-inline" data-toggle="cxselect" data-selects="province,city,area">
<select class="province form-control" name="province" data-url="ajax/area"></select>
<select class="city form-control" name="city" data-url="ajax/area"></select>
<select class="area form-control" name="area" data-url="ajax/area"></select>
</div>
</div>
<div class="col-xs-3 text-right">
<h6><label class="label label-primary"><i class="fa fa-pencil"></i> 增加</label></h6>
</div>
<div class="col-xs-12">
<textarea class="form-control" rows="8">
</textarea>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<div class="form-inline" data-toggle="cxselect" data-selects="province,city,area">
<select class="province form-control" name="province" data-url="ajax/area">
<option value="1964" selected>广东省</option>
</select>
<select class="city form-control" name="city" data-url="ajax/area">
<option value="1988" selected>深圳市</option>
</select>
<select class="area form-control" name="area" data-url="ajax/area">
<option value="1991" selected>南山区</option>
</select>
</div>
</div>
<div class="col-xs-3 text-right">
<h6><label class="label label-success"><i class="fa fa-edit"></i> 修改</label></h6>
</div>
<div class="col-xs-12">
<textarea class="form-control" rows="8">
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><b>类别联动</b>(Ajax读取数据)</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-9">
<div class="form-inline" data-toggle="cxselect" data-selects="first,second">
<select class="first form-control" name="first" data-url="ajax/category?type=page&pid=5"></select>
<select class="second form-control" name="second" data-url="ajax/category" data-query-name="pid"></select>
</div>
</div>
<div class="col-xs-3 text-right">
<h6><label class="label label-primary"><i class="fa fa-pencil"></i> 增加</label></h6>
</div>
<div class="col-xs-12">
<textarea class="form-control" rows="8">
</textarea>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<div class="form-inline" data-toggle="cxselect" data-selects="first,second">
<select class="first form-control" name="first" data-url="ajax/category?type=page&pid=5">
<option value="6" selected>网站建站</option>
</select>
<select class="second form-control" name="second" data-url="ajax/category" data-query-name="pid">
<option value="9" selected>移动端</option>
</select>
</div>
</div>
<div class="col-xs-3 text-right">
<h6><label class="label label-success"><i class="fa fa-edit"></i> 修改</label></h6>
</div>
<div class="col-xs-12">
<textarea class="form-control" rows="8">
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><b>省市区联动</b>(通过JSON渲染数据)</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-9">
<!--由于在初始化中修改了默认值,所以这里需要修改-jsonSpace/jsonValue/jsonName的值-->
<div class="form-inline" data-toggle="cxselect" data-url="__CDN__/assets/libs/fastadmin-cxselect/js/cityData.min.json"
data-selects="province,city,area" data-json-space="" data-json-name="n" data-json-value="">
<select class="province form-control" name="province"></select>
<select class="city form-control" name="city"></select>
<select class="area form-control" name="area"></select>
</div>
</div>
<div class="col-xs-3 text-right">
<h6><label class="label label-primary"><i class="fa fa-pencil"></i> 增加</label></h6>
</div>
<div class="col-xs-12">
<textarea class="form-control" rows="8">
</textarea>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<!--由于在初始化中修改了默认值,所以这里需要修改-jsonSpace/jsonValue/jsonName的值-->
<div class="form-inline" data-toggle="cxselect" data-url="__CDN__/assets/libs/fastadmin-cxselect/js/cityData.min.json"
data-selects="province,city,area" data-json-space="" data-json-name="n" data-json-value="">
<select class="province form-control" data-first-title="选择省">
<option value="">请选择</option>
<option value="浙江省" selected>浙江省</option>
</select>
<select class="city form-control" data-first-title="选择市">
<option value="">请选择</option>
<option value="杭州市" selected>杭州市</option>
</select>
<select class="area form-control" data-first-title="选择地区">
<option value="">请选择</option>
<option value="西湖区" selected>西湖区</option>
</select>
</div>
</div>
<div class="col-xs-3 text-right">
<h6><label class="label label-success"><i class="fa fa-edit"></i> 修改</label></h6>
</div>
<div class="col-xs-12">
<textarea class="form-control" rows="8">
</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<style>
.tab-content > .chart {
padding: 10px;
}
</style>
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>150</h3>
<p>今日订单</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>53<sup style="font-size: 20px">%</sup></h3>
<p>同比增长率</p>
</div>
<div class="icon">
<i class="fa fa-area-chart"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>44</h3>
<p>今日注册用户数</p>
</div>
<div class="icon">
<i class="fa fa-users"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>65</h3>
<p>唯一访客用户</p>
</div>
<div class="icon">
<i class="fa fa-user"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row" style="margin-bottom:5px;">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom charts-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#line-chart" data-toggle="tab">折线图</a></li>
<li><a href="#area-chart" data-toggle="tab">区域图</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> 销售趋势</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="line-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="area-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
<div class="nav-tabs-custom charts-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#pie-chart" data-toggle="tab">饼图</a></li>
<li><a href="#bar-chart" data-toggle="tab">柱状图</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> 访问记录</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="pie-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="bar-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
<!-- /.nav-tabs-custom -->
</section>
<!-- /.Left col -->
<section class="col-lg-5 connectedSortable">
<!-- Map box -->
<div class="box box-solid bg-light-blue-gradient">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
</div>
<!-- /. tools -->
<i class="fa fa-map-marker"></i>
<h3 class="box-title">
访客分布
</h3>
</div>
<div class="box-body">
<div id="simplebar-chart" style="height: 250px; width: 100%;"></div>
</div>
<!-- /.box-body-->
<div class="box-footer no-border">
<div class="row">
<div class="col-xs-12 text-center">
<div class="knob-label">统计最近一周访客的记录</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.box -->
<!-- solid sales graph -->
<div class="box box-solid bg-teal-gradient">
<div class="box-header">
<i class="fa fa-th"></i>
<h3 class="box-title">订单趋势</h3>
<div class="box-tools pull-right">
</div>
</div>
<div class="box-body border-radius-none">
<div class="chart" id="smoothline-chart" style="height: 250px;"></div>
</div>
<!-- /.box-body-->
<div class="box-footer no-border">
<div class="row">
<div class="col-xs-12 text-center">
<div class="knob-label">统计最近一周订单的趋势</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.box -->
</section>
<!-- right col -->
</div>
<!-- /.row (main row) -->
<div class="panel panel-default panel-intro">
<div class="panel-heading">
<div class="panel-lead"><em>多表格（Multitable）</em>用于展示在一个页面展示多个表格数据,并且每次切换时刷新</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#first" data-toggle="tab">表格1</a></li>
<li><a href="#second" data-toggle="tab">表格2</a></li>
</ul>
</div>
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="first">
<div id="toolbar1" class="toolbar">
{:build_toolbar('refresh')}
</div>
<table id="table1" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
<div class="tab-pane fade" id="second">
<div id="toolbar2" class="toolbar">
{:build_toolbar('refresh')}
</div>
<table id="table2" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh,delete')}
</div>
<table id="table" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<div class="panel panel-default panel-intro">
<div class="panel-body">
<div id="1" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar1" class="toolbar">
{:build_toolbar('refresh')}
</div>
<table id="table1" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8">
<div class="panel panel-default panel-intro">
<div class="panel-body">
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade active in" id="two">
<div class="widget-body no-padding">
<div id="toolbar2" class="toolbar">
{:build_toolbar('refresh')}
</div>
<table id="table2" class="table table-striped table-bordered table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh,delete')}
<a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a>
<a class="btn btn-success btn-toggle-view" href="javascript:;"><i class="fa fa-leaf"></i> 切换视图</a>
</div>
<table id="table" class="table table-striped table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.example {
height:100%;position: relative;
}
.example > span {
position:absolute;left:15px;top:15px;
}
</style>
<script id="itemtpl" type="text/html">
<!--
如果启用了templateView,默认调用的是itemtpl这个模板，可以通过设置templateFormatter来修改
在当前模板中可以使用三个变量(item:行数据,i:当前第几行,data:所有的行数据)
此模板引擎使用的是art-template的native,可参考官方文档
-->
<div class="col-sm-4 col-md-3">
<!--下面四行是为了展示随机图片和标签，可移除-->
<% var imagearr = ['https://cdn.fastadmin.net/uploads/addons/blog.png', 'https://cdn.fastadmin.net/uploads/addons/cms.png', 'https://cdn.fastadmin.net/uploads/addons/vote.png', 'https://cdn.fastadmin.net/uploads/addons/blog.png', 'https://cdn.fastadmin.net/uploads/addons/alisms.png']; %>
<% var image = imagearr[item.id % 5]; %>
<% var labelarr = ['primary', 'success', 'info', 'danger', 'warning']; %>
<% var label = labelarr[item.id % 5]; %>
<div class="thumbnail example">
<span class="btn btn-<%=label%>">ID:<%=item.id%></span>
<img src="<%=image%>" style="width:100%;" alt="<%=item.title%>">
<div class="caption">
<h4><%=item.title?item.title:'无'%></h4>
<p class="text-muted">操作者IP:<%=item.ip%></p>
<p class="text-muted">操作时间:<%=Moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")%></p>
<p>
<!--详情的事件需要在JS中手动绑定-->
<a href="#" class="btn btn-primary btn-success btn-detail" data-id="<%=item.id%>"><i class="fa fa-camera"></i> 详情</a>
<!--如果需要响应编辑或删除事件，可以给元素添加 btn-edit或btn-del的类和data-id这个属性值-->
<a href="#" class="btn btn-primary btn-edit" data-id="<%=item.id%>"><i class="fa fa-pencil"></i> 编辑</a>
<a href="#" class="btn btn-danger btn-del" data-id="<%=item.id%>"><i class="fa fa-times"></i> 删除</a>
<span class="pull-right" style="margin-top:10px;">
<!--如果需要多选操作，请确保有下面的checkbox元素存在,可移除-->
<input name="checkbox" data-id="<%=item.id%>" type="checkbox" />
</span>
</p>
</div>
</div>
</div>
</script>
\ No newline at end of file
... ... @@ -30,10 +30,6 @@ return [
],
],
'route' => [
'/example$' => 'example/index/index',
'/example/d/[:name]' => 'example/demo/index',
'/example/d1/[:name]' => 'example/demo/demo1',
'/example/d2/[:name]' => 'example/demo/demo2',
'/qrcode$' => 'qrcode/index/index',
'/qrcode/build$' => 'qrcode/index/build',
],
... ...
html,
body {
height: 100%;
}
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.img-addon {
margin-bottom: 10px;
width:100%;
}
.img-hover:hover {
opacity: 0.8;
}
.display-1 {
font-size:44px;
}
.display-4 {
font-size:24px;
line-height:32px;
}
/* Home Page Carousel */
header.carousel {
height: 50%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
}
/* 404 Page Styles */
.error-404 {
font-size: 100px;
}
/* Pricing Page Styles */
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
@media(max-width:991px) {
.customer-img,
.img-related {
margin-bottom: 30px;
}
}
@media(max-width:767px) {
.img-addon {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
.carousel-body {
position:absolute;
width: 100%;
top:25%;
text-align:center;
color:#fff;
}
.addonlist a > p{
margin-bottom:15px;
}
/** @license
* RequireJS plugin for async dependency load like JSONP and Google Maps
* Author: Miller Medeiros
* Version: 0.1.2 (2014/02/24)
* Released under the MIT license
*/
define(function(){
var DEFAULT_PARAM_NAME = 'callback',
_uid = 0;
function injectScript(src){
var s, t;
s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = src;
t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s,t);
}
function formatUrl(name, id){
var paramRegex = /!(.+)/,
url = name.replace(paramRegex, ''),
param = (paramRegex.test(name))? name.replace(/.+!/, '') : DEFAULT_PARAM_NAME;
url += (url.indexOf('?') < 0)? '?' : '&';
return url + param +'='+ id;
}
function uid() {
_uid += 1;
return '__async_req_'+ _uid +'__';
}
return{
load : function(name, req, onLoad, config){
if(config.isBuild){
onLoad(null); //avoid errors on the optimizer
}else{
var id = uid();
//create a global variable that stores onLoad so callback
//function can define new module after async load
window[id] = onLoad;
injectScript(formatUrl(req.toUrl(name), id));
}
}
};
});
\ No newline at end of file
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function ($, undefined, Backend, Table, Form, Template) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'example/bootstraptable/index',
add_url: '',
edit_url: 'example/bootstraptable/edit',
del_url: 'example/bootstraptable/del',
multi_url: '',
}
});
var table = $("#table");
//在普通搜索提交搜索前
table.on('common-search.bs.table', function (event, table, query) {
//这里可以获取到普通搜索表单中字段的查询条件
console.log(query);
});
//在普通搜索渲染后
table.on('post-common-search.bs.table', function (event, table) {
var form = $("form", table.$commonsearch);
$("input[name='title']", form).addClass("selectpage").data("source", "example/bootstraptable/selectpage").data("primaryKey", "title").data("field", "title").data("orderBy", "id desc");
$("input[name='username']", form).addClass("selectpage").data("source", "auth/admin/index").data("primaryKey", "username").data("field", "username").data("orderBy", "id desc");
Form.events.cxselect(form);
Form.events.selectpage(form);
});
//在表格内容渲染完成后回调的事件
table.on('post-body.bs.table', function (e, settings, json, xhr) {
console.log(e, settings, json, xhr);
});
//当表格数据加载完成时
table.on('load-success.bs.table', function (e, data) {
//这里可以获取从服务端获取的JSON数据
console.log(data);
//这里我们手动设置底部的值
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
// 初始化表格
// 这里使用的是Bootstrap-table插件渲染表格
// 相关文档：https://doc.fastadmin.net/doc/table.html
table.bootstrapTable({
//表格参数可以参考：https://doc.fastadmin.net/doc/190.html
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
//更多列参数可以参考：https://doc.fastadmin.net/doc/191.html
//该列为复选框字段,如果后台的返回state值将会默认选中
{field: 'state', checkbox: true,},
//sortable为是否排序,operate为搜索时的操作符,visible表示是否可见
{field: 'id', title: 'ID', sortable: true, operate: false},
//直接响应搜索
{field: 'username', title: __('管理员'), formatter: Table.api.formatter.search},
//模糊搜索
{field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '模糊搜索，*表示任意字符', width: '280px'},
//通过Ajax渲染searchList，也可以使用JSON数据
{
field: 'url',
title: __('Url'),
align: 'left',
searchList: $.getJSON('example/bootstraptable/searchlist?search=a&field=row[user_id]'),
formatter: Controller.api.formatter.url,
addClass: "selectpicker"
},
//点击IP时同时执行搜索此IP
{
field: 'ip',
title: __('IP'),
events: Controller.api.events.ip,
formatter: Controller.api.formatter.ip
},
//自定义栏位,custom是不存在的字段
{field: 'custom', title: __('切换'), operate: false, formatter: Controller.api.formatter.custom},
{
field: 'admin_id', title: __('联动搜索'), searchList: function (column) {
return Template('categorytpl', {});
}, formatter: function (value, row, index) {
return '无';
}, visible: false
},
//启用时间段搜索
{
field: 'createtime',
title: __('Update time'),
sortable: true,
formatter: Table.api.formatter.datetime,
operate: 'RANGE',
addclass: 'datetimerange'
},
//操作栏,默认有编辑、删除或排序按钮,可自定义配置buttons来扩展按钮
{
field: 'operate',
width: "150px",
title: __('Operate'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'click',
title: __('点击执行事件'),
classname: 'btn btn-xs btn-info btn-click',
icon: 'fa fa-leaf',
// dropdown: '更多',//如果包含dropdown，将会以下拉列表的形式展示
click: function (data) {
Layer.alert("点击按钮执行的事件");
}
},
{
name: 'detail',
title: __('弹出窗口打开'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'example/bootstraptable/detail',
callback: function (data) {
Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
}
},
{
name: 'ajax',
title: __('发送Ajax'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
confirm: '确认发送Ajax请求？',
url: 'example/bootstraptable/detail',
success: function (data, ret) {
Layer.alert(ret.msg + ",返回数据：" + JSON.stringify(data));
//如果需要阻止成功提示，则必须使用return false;
//return false;
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
},
{
name: 'addtabs',
title: __('新选项卡中打开'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
],
formatter: Table.api.formatter.operate
},
],
],
//更多配置参数可参考：https://doc.fastadmin.net/doc/190.html
//亦可以参考require-table.js中defaults的配置
//快捷搜索,这里可在控制器定义快捷搜索的字段
search: true,
//启用普通表单搜索
commonSearch: true,
//显示导出按钮
showExport: true,
//启用跨页选择
maintainSelected: true,
//启用固定列
fixedColumns: true,
//固定左侧列数
fixedNumber: 3,
//固定右侧列数
fixedRightNumber: 1,
//导出类型
exportDataType: "all", //共有basic, all, selected三种值 basic当前页 all全部 selected仅选中
//导出下拉列表选项
exportTypes: ['json', 'xml', 'csv', 'txt', 'doc', 'excel'],
//可以控制是否默认显示搜索单表,false则隐藏,默认为false
searchFormVisible: true,
queryParams: function (params) {
//这里可以追加搜索条件
var filter = JSON.parse(params.filter);
var op = JSON.parse(params.op);
//这里可以动态赋值，比如从URL中获取admin_id的值，filter.admin_id=Fast.api.query('admin_id');
filter.admin_id = 1;
op.admin_id = "=";
params.filter = JSON.stringify(filter);
params.op = JSON.stringify(op);
return params;
},
});
// 为表格绑定事件
Table.api.bindevent(table);
// 监听下拉列表改变的事件
$(document).on('change', 'select[name=admin]', function () {
$("input[name='admin_id']").val($(this).val());
});
//自定义Tab筛选条件
$('.panel-heading .nav-custom-condition a[data-toggle="tab"]', table.closest(".panel-intro")).on('shown.bs.tab', function (e) {
var value = $(this).data("value");
var options = table.bootstrapTable('getOptions');
var queryParams = options.queryParams;
options.pageNumber = 1;
options.queryParams = function (params) {
//这一行必须要存在,否则在点击下一页时会丢失搜索栏数据
params = queryParams(params);
//如果希望追加搜索条件,可使用
var filter = params.filter ? JSON.parse(params.filter) : {};
var op = params.op ? JSON.parse(params.op) : {};
if (value) {
//这里可以自定义多个筛选条件
filter.admin_id = value;
op.admin_id = '=';
} else {
//选全部时要移除相应的条件
delete filter.admin_id;
delete op.admin_id;
}
params.filter = JSON.stringify(filter);
params.op = JSON.stringify(op);
//如果希望忽略搜索栏搜索条件,可使用
//params.filter = JSON.stringify(value?{admin_id: value}:{});
//params.op = JSON.stringify(value?{admin_id: '='}:{});
return params;
};
table.trigger("uncheckbox");
table.bootstrapTable('refresh', {pageNumber: 1});
return false;
});
// 指定搜索条件
$(document).on("click", ".btn-singlesearch", function () {
var options = table.bootstrapTable('getOptions');
var queryParams = options.queryParams;
options.pageNumber = 1;
options.queryParams = function (params) {
//这一行必须要存在,否则在点击下一页时会丢失搜索栏数据
params = queryParams(params);
//如果希望追加搜索条件,可使用
var filter = params.filter ? JSON.parse(params.filter) : {};
var op = params.op ? JSON.parse(params.op) : {};
filter.url = 'login';
op.url = 'like';
params.filter = JSON.stringify(filter);
params.op = JSON.stringify(op);
//如果希望忽略搜索栏搜索条件,可使用
//params.filter = JSON.stringify({url: 'login'});
//params.op = JSON.stringify({url: 'like'});
return params;
};
table.bootstrapTable('refresh', {});
Toastr.info("当前执行的是自定义搜索,搜索URL中包含login的数据");
return false;
});
// 获取选中项
$(document).on("click", ".btn-selected", function () {
Layer.alert(JSON.stringify(Table.api.selecteddata(table)));
});
// 启动和暂停按钮
$(document).on("click", ".btn-start,.btn-pause", function () {
//在table外不可以使用添加.btn-change的方法
//只能自己调用Table.api.multi实现
//如果操作全部则ids可以置为空
var ids = Table.api.selectedids(table);
Table.api.multi("changestatus", ids.join(","), table, this);
});
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
detail: function () {
$(document).on('click', '.btn-callback', function () {
Fast.api.close($("input[name=callback]").val());
});
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},
formatter: {//渲染的方法
url: function (value, row, index) {
return '<div class="input-group input-group-sm" style="width:250px;"><input type="text" class="form-control input-sm" value="' + value + '"><span class="input-group-btn input-group-sm"><a href="' + value + '" target="_blank" class="btn btn-default btn-sm"><i class="fa fa-link"></i></a></span></div>';
},
ip: function (value, row, index) {
return '<a class="btn btn-xs btn-ip bg-success"><i class="fa fa-map-marker"></i> ' + value + '</a>';
},
custom: function (value, row, index) {
//添加上btn-change可以自定义请求的URL进行数据处理
return '<a class="btn-change text-success" data-url="example/bootstraptable/change" data-confirm="确认切换状态？" data-id="' + row.id + '"><i class="fa ' + (row.title == '' ? 'fa-toggle-on fa-flip-horizontal text-gray' : 'fa-toggle-on') + ' fa-2x"></i></a>';
},
},
events: {//绑定事件的方法
ip: {
//格式为：方法名+空格+DOM元素
'click .btn-ip': function (e, value, row, index) {
e.stopPropagation();
var container = $("#table").data("bootstrap.table").$container;
var options = $("#table").bootstrapTable('getOptions');
//这里我们手动将数据填充到表单然后提交
$("form.form-commonsearch [name='ip']", container).val(value);
$("form.form-commonsearch", container).trigger('submit');
Toastr.info("执行了自定义搜索操作");
}
},
}
}
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'example/colorbadge/index',
add_url: '',
edit_url: '',
del_url: 'example/colorbadge/del',
multi_url: '',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID'},
{field: 'title', title: __('Title')},
{field: 'ip', title: __('IP')},
{field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
],
onLoadSuccess: function (data) {
// 在表格第次加载成功后,刷新左侧菜单栏彩色小角标,支持一次渲染多个
// 如果需要在进入后台即显示左侧的彩色小角标,请使用服务端渲染方式,详情修改application/admin/controller/Index.php
Backend.api.sidebar({
'example/colorbadge': data.total
});
Toastr.info("左侧角标已经刷新成功");
}
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Form.api.bindevent($("form[role=form]"));
},
edit: function () {
Form.api.bindevent($("form[role=form]"));
}
};
return Controller;
});
\ No newline at end of file
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'example/controllerjump/index',
add_url: '',
edit_url: '',
del_url: 'example/controllerjump/del',
multi_url: '',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID'},
{field: 'admin_id', title: __('Admin_id')},
{field: 'title', title: __('Title')},
{field: 'ip', title: __('IP'),formatter: Controller.api.formatter.ip},
{field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Form.api.bindevent($("form[role=form]"));
},
edit: function () {
Form.api.bindevent($("form[role=form]"));
},
api: {
formatter: {
ip: function (value, row, index) {
//这里手动构造URL
url = "example/bootstraptable?" + this.field + "=" + value;
//方式一,直接返回class带有addtabsit的链接,这可以方便自定义显示内容
//return '<a href="' + url + '" class="label label-success addtabsit" title="' + __("Search %s", value) + '">' + __('Search %s', value) + '</a>';
//方式二,直接调用Table.api.formatter.addtabs
this.url = url;
return Table.api.formatter.addtabs.call(this, value, row, index);
}
}
}
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
Template.helper("Fast", Fast);
//因为日期选择框不会触发change事件，导致无法刷新textarea，所以加上判断
$(document).on("dp.change", "#second-form .datetimepicker", function () {
$(this).parent().prev().find("input").trigger("change");
});
$(document).on("fa.event.appendfieldlist", "#first-table .btn-append", function (e, obj) {
});
$(document).on("fa.event.appendfieldlist", "#second-table .btn-append", function (e, obj) {
//绑定动态下拉组件
Form.events.selectpage(obj);
//绑定日期组件
Form.events.datetimepicker(obj);
//绑定上传组件
Form.events.faupload(obj);
//上传成功回调事件，变更按钮的背景
$(".upload-image", obj).data("upload-success", function (data) {
$(this).css("background-image", "url('" + Fast.api.cdnurl(data.url) + "')");
})
});
Form.api.bindevent($("form[role=form]"), function (data, ret) {
Layer.alert(data.data);
});
},
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
//
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'example/customsearch/index',
add_url: 'example/customsearch/add',
edit_url: '',
del_url: 'example/customsearch/del',
multi_url: 'example/customsearch/multi',
table: '',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
searchFormVisible: true,
searchFormTemplate: 'customformtpl',
columns: [
[
{checkbox: true},
{field: 'id', title: 'ID', operate: false},
{field: 'admin_id', title: __('Admin_id'), visible: false, operate: false},
{field: 'username', title: __('Username'), formatter: Table.api.formatter.search},
{field: 'title', title: __('Title')},
{field: 'url', title: __('Url'), align: 'left'},
{field: 'ip', title: __('IP')},
{field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{
field: 'operate',
title: __('Operate'),
table: table,
events: Table.api.events.operate,
formatter: Table.api.formatter.operate
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
$("#cxselect-example .col-xs-12").each(function () {
$("textarea", this).val($(this).prev().prev().html().replace(/[ ]{2}/g, ''));
});
//这里需要手动为Form绑定上元素事件
Form.api.bindevent($("form#cxselectform"));
}
};
return Controller;
});
\ No newline at end of file
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Template, Echarts) {
var Controller = {
index: function () {
//这句话在多选项卡统计表时必须存在，否则会导致影响的图表宽度不正确
$(document).on("click", ".charts-custom a[data-toggle=\"tab\"]", function () {
var that = this;
setTimeout(function () {
var id = $(that).attr("href");
var chart = Echarts.getInstanceByDom($(id)[0]);
chart.resize();
}, 0);
});
// 基于准备好的dom，初始化echarts实例
var lineChart = Echarts.init(document.getElementById('line-chart'), 'walden');
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [49, 92, 61, 134, 90, 130, 120],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
lineChart.setOption(option);
// 基于准备好的dom，初始化echarts实例
var areaChart = Echarts.init(document.getElementById('area-chart'), 'walden');
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
// 使用刚指定的配置项和数据显示图表。
areaChart.setOption(option);
var pieChart = Echarts.init(document.getElementById('pie-chart'), 'walden');
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
pieChart.setOption(option);
var barChart = Echarts.init(document.getElementById('bar-chart'), 'walden');
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['产品销售', '2015', '2016', '2017'],
['风扇', 43.3, 85.8, 93.7],
['电视机', 83.1, 73.4, 55.1],
['空调', 86.4, 65.2, 82.5],
['冰箱', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
// 使用刚指定的配置项和数据显示图表。
barChart.setOption(option);
var barChart = Echarts.init(document.getElementById('simplebar-chart'));
option = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: "#fff"
}
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#fff"
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
color: "#fff",
opacity: 0.6
}
}]
};
// 使用刚指定的配置项和数据显示图表。
barChart.setOption(option);
var barChart = Echarts.init(document.getElementById('smoothline-chart'));
option = {
textStyle: {
color: "#fff"
},
color: ['#fff'],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {
lineStyle: {
color: "#fff"
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "#fff"
}
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
areaStyle: {
opacity: 0.4
}
}]
};
// 使用刚指定的配置项和数据显示图表。
barChart.setOption(option);
}
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init();
//绑定事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var panel = $($(this).attr("href"));
if (panel.length > 0) {
Controller.table[panel.attr("id")].call(this);
$(this).on('click', function (e) {
$($(this).attr("href")).find(".btn-refresh").trigger("click");
});
}
//移除绑定的事件
$(this).unbind('shown.bs.tab');
});
//必须默认触发shown.bs.tab事件
$('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");
},
table: {
first: function () {
// 表格1
var table1 = $("#table1");
table1.bootstrapTable({
url: 'example/multitable/table1',
toolbar: '#toolbar1',
sortName: 'id',
search: false,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID'},
{field: 'filename', title: __('Name')},
{field: 'imagewidth', title: __('Imagewidth')},
{field: 'imageheight', title: __('Imageheight')},
{field: 'mimetype', title: __('Mimetype')},
{field: 'operate', title: __('Operate'), table: table1, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
]
});
// 为表格1绑定事件
Table.api.bindevent(table1);
},
second: function () {
// 表格2
var table2 = $("#table2");
table2.bootstrapTable({
url: 'example/multitable/table2',
extend: {
index_url: '',
add_url: '',
edit_url: '',
del_url: '',
multi_url: '',
table: '',
},
toolbar: '#toolbar2',
sortName: 'id',
search: false,
columns: [
[
{field: 'id', title: 'ID'},
{field: 'title', title: __('Title')},
{field: 'url', title: __('Url'), align: 'left', formatter: Table.api.formatter.url},
{field: 'ip', title: __('ip')},
{field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
]
]
});
// 为表格2绑定事件
Table.api.bindevent(table2);
}
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},
}
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'example/relationmodel/index',
add_url: '',
edit_url: '',
del_url: 'example/relationmodel/del',
multi_url: '',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID', operate: '='},
{field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '关键字，模糊搜索'},
{field: 'admin.avatar', title: __('Avatar'), operate: false, formatter: Table.api.formatter.image},
{field: 'admin.username', title: __('Username'), operate: 'FIND_IN_SET'},
{field: 'admin.nickname', title: __('Nickname'), operate: 'LIKE %...%', placeholder: '关键字，模糊搜索'},
{field: 'ip', title: __('IP'), operate: '='},
{field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'admin.createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
],
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Form.api.bindevent($("form[role=form]"));
},
edit: function () {
Form.api.bindevent($("form[role=form]"));
},
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init();
this.table.first();
this.table.second();
},
table: {
first: function () {
// 表格1
var table1 = $("#table1");
table1.bootstrapTable({
url: 'example/tablelink/table1',
toolbar: '#toolbar1',
sortName: 'id',
search: false,
columns: [
[
// {field: 'state', checkbox: true,},
{field: 'id', title: 'ID'},
{field: 'username', title: __('Nickname')},
{
field: 'operate', title: __('Operate'), table: table1, events: Table.api.events.operate, buttons: [
{
name: 'log',
title: '日志列表',
text: '日志列表',
icon: 'fa fa-list',
classname: 'btn btn-primary btn-xs btn-click',
click: function (e, data) {
$("#myTabContent2 .form-commonsearch input[name='username']").val(data.username);
$("#myTabContent2 .btn-refresh").trigger("click");
}
}
], formatter: Table.api.formatter.operate
}
]
]
});
// 为表格1绑定事件
Table.api.bindevent(table1);
},
second: function () {
// 表格2
var table2 = $("#table2");
table2.bootstrapTable({
url: 'example/tablelink/table2',
extend: {
index_url: '',
add_url: '',
edit_url: '',
del_url: '',
multi_url: '',
table: '',
},
toolbar: '#toolbar2',
sortName: 'id',
search: false,
columns: [
[
{field: 'state', checkbox: true,},
{field: 'id', title: 'ID'},
{field: 'username', title: __('Nickname')},
{field: 'title', title: __('Title')},
{field: 'url', title: __('Url'), align: 'left', formatter: Table.api.formatter.url},
{field: 'ip', title: __('ip')},
{field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
]
]
});
// 为表格2绑定事件
Table.api.bindevent(table2);
}
},
};
return Controller;
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function ($, undefined, Backend, Table, Form, Template) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'example/tabletemplate/index',
add_url: '',
edit_url: '',
del_url: 'example/tabletemplate/del',
multi_url: '',
}
});
var table = $("#table");
Template.helper("Moment", Moment);
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
templateView: true,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID', operate: false},
//直接响应搜索
{field: 'username', title: __('Username'), formatter: Table.api.formatter.search},
//模糊搜索
{field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '模糊搜索，*表示任意字符', style: 'width:200px'},
//通过Ajax渲染searchList
{field: 'url', title: __('Url'), align: 'left', formatter: Controller.api.formatter.url},
//点击IP时同时执行搜索此IP,同时普通搜索使用下拉列表的形式
{field: 'ip', title: __('IP'), searchList: ['127.0.0.1', '127.0.0.2'], events: Controller.api.events.ip, formatter: Controller.api.formatter.ip},
//browser是一个不存在的字段
//通过formatter来渲染数据,同时为它添加上事件
{field: 'browser', title: __('Browser'), operate: false, events: Controller.api.events.browser, formatter: Controller.api.formatter.browser},
//启用时间段搜索
{field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
],
],
//禁用默认搜索
search: false,
//启用普通表单搜索
commonSearch: false,
//可以控制是否默认显示搜索单表,false则隐藏,默认为false
searchFormVisible: false,
//分页大小
pageSize: 12
});
// 为表格绑定事件
Table.api.bindevent(table);
//指定搜索条件
$(document).on("click", ".btn-toggle-view", function () {
var options = table.bootstrapTable('getOptions');
table.bootstrapTable('refreshOptions', {templateView: !options.templateView});
});
//点击详情
$(document).on("click", ".btn-detail[data-id]", function () {
Backend.api.open('example/bootstraptable/detail/ids/' + $(this).data('id'), __('Detail'));
});
//获取选中项
$(document).on("click", ".btn-selected", function () {
//在templateView的模式下不能调用table.bootstrapTable('getSelections')来获取选中的ID,只能通过下面的Table.api.selectedids来获取
Layer.alert(JSON.stringify(Table.api.selectedids(table)));
});
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},
formatter: {
url: function (value, row, index) {
return '<div class="input-group input-group-sm" style="width:250px;"><input type="text" class="form-control input-sm" value="' + value + '"><span class="input-group-btn input-group-sm"><a href="' + value + '" target="_blank" class="btn btn-default btn-sm"><i class="fa fa-link"></i></a></span></div>';
},
ip: function (value, row, index) {
return '<a class="btn btn-xs btn-ip bg-success"><i class="fa fa-map-marker"></i> ' + value + '</a>';
},
browser: function (value, row, index) {
//这里我们直接使用row的数据
return '<a class="btn btn-xs btn-browser">' + row.useragent.split(" ")[0] + '</a>';
}
},
events: {
ip: {
'click .btn-ip': function (e, value, row, index) {
var options = $("#table").bootstrapTable('getOptions');
//这里我们手动将数据填充到表单然后提交
$("#commonSearchContent_" + options.idTable + " form [name='ip']").val(value);
$("#commonSearchContent_" + options.idTable + " form").trigger('submit');
Toastr.info("执行了自定义搜索操作");
}
},
browser: {
'click .btn-browser': function (e, value, row, index) {
Layer.alert("该行数据为: <code>" + JSON.stringify(row) + "</code>");
}
}
}
}
};
return Controller;
});
\ No newline at end of file