feat(history): 添加历史数据管理功能和数据分析图表
- 在addons.php中添加example模块路由配置 - 新增application/config.php配置文件，包含应用设置、数据库配置等 - 实现dashboard.js仪表盘功能，包含冷热号码分析、比例分析图表 - 添加history.js历史数据管理功能，支持号码查询和统计分析 - 集成echarts图表库实现数据可视化展示 - 添加号码颜色映射和生肖映射功能 - 实现号码球样式格式化显示 - 添加遗漏号码、走势图、冷热分析等数据分析功能
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<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>
|
||||
@@ -0,0 +1,11 @@
|
||||
<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>
|
||||
@@ -0,0 +1,57 @@
|
||||
<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>
|
||||
@@ -0,0 +1,21 @@
|
||||
<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>
|
||||
@@ -0,0 +1,21 @@
|
||||
<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>
|
||||
@@ -0,0 +1,350 @@
|
||||
<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="__CDN__/assets/addons/example/img/1.png,__CDN__/assets/addons/example/img/2.png,__CDN__/assets/addons/example/img/3.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="__CDN__/assets/addons/example/img/1.png,__CDN__/assets/addons/example/img/2.png,__CDN__/assets/addons/example/img/3.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":"CMS内容管理系统","size":"2M"},{"info":"在线投票系统","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>
|
||||
@@ -0,0 +1,126 @@
|
||||
<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>
|
||||
@@ -0,0 +1,160 @@
|
||||
<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>
|
||||
@@ -0,0 +1,165 @@
|
||||
<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) -->
|
||||
@@ -0,0 +1,27 @@
|
||||
<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>
|
||||
@@ -0,0 +1,21 @@
|
||||
<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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<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>
|
||||
@@ -0,0 +1,67 @@
|
||||
<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 = ['__CDN__/assets/addons/example/img/1.png', '__CDN__/assets/addons/example/img/2.png', '__CDN__/assets/addons/example/img/3.png']; %>
|
||||
<% var image = imagearr[item.id % 3]; %>
|
||||
<% var labelarr = ['primary', 'success', 'info', 'danger', 'warning']; %>
|
||||
<% var label = labelarr[item.id % 3]; %>
|
||||
<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>
|
||||
Reference in New Issue
Block a user