作者 Karson

添加表格模板渲染条目功能

新增表格模板示例
新增表格未加载完成禁止提交
新增控制台图表动态加载的功能
修改requrejs加载超时为30秒
修复commonsearch存在多个时导致搜索框无法正常加载的BUG
优化后台微信管理中菜单管理的排版问题
优化语言包文字显示
<?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();
}
}
... ...
... ... @@ -69,6 +69,7 @@ return [
'Status' => '状态',
'Operate' => '操作',
'Append' => '追加',
'Select' => '选择',
'Memo' => '备注',
'Parent' => '父级',
'Params' => '参数',
... ... @@ -78,6 +79,7 @@ return [
'Begin time' => '开始时间',
'End time' => '结束时间',
'Create time' => '创建时间',
'Update time' => '更新时间',
'Flag' => '标志',
'Redirect now' => '立即跳转',
'Operation completed' => '操作成功!',
... ...
<?php
return [
'Text' => '文本',
'Event key' => '响应标识',
'Remark' => '备注',
];
... ...
<?php
return [
'Resource title' => '资源标题',
'Event key' => '事件标识',
'Text' => '文本',
'App' => '应用',
];
... ...
<!-- Logo -->
<a href="javascript:;" class="logo">
<!-- 迷你模式下Logo的大小为50X50 -->
<span class="logo-mini"><b>F</b>AST</span>
<span class="logo-mini">{$site.name|mb_substr=0,4|strtoupper}</span>
<!-- 普通模式下Logo -->
<span class="logo-lg"><b>Fast</b>Admin</span>
<span class="logo-lg"><b>{$site.name|mb_substr=0,4}</b>{$site.name|mb_substr=4}</span>
</a>
<!-- 顶部通栏样式 -->
<nav class="navbar navbar-static-top">
... ...
... ... @@ -8,7 +8,7 @@
<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-warning btn-singlesearch" href="javascript:;"><i class="fa fa-leaf"></i> 单独设置搜索条件</a>
<a class="btn btn-success btn-singlesearch" 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">
... ...
<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-templatenative,可参考官方文档
-->
<div class="col-sm-4 col-md-3">
<!--下面四行是为了展示随机图片和标签,可移除-->
<% var imagearr = ['https://ws2.sinaimg.cn/large/006tNc79gy1fgphwokqt9j30dw0990tb.jpg', 'https://ws2.sinaimg.cn/large/006tNc79gy1fgphwt8nq8j30e609f3z4.jpg', 'https://ws1.sinaimg.cn/large/006tNc79gy1fgphwn44hvj30go0b5myb.jpg', 'https://ws1.sinaimg.cn/large/006tNc79gy1fgphwnl37mj30dw09agmg.jpg', 'https://ws3.sinaimg.cn/large/006tNc79gy1fgphwqsvh6j30go0b576c.jpg']; %>
<% 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%>" class="img-responsive" 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).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-editbtn-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
... ...
... ... @@ -23,7 +23,7 @@
<div class="form-group">
<label for="c-local" class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button id="plupload-local" class="btn btn-primary plupload" data-input-id="c-local" data-url="{:url('ajax/upload')}" data-after-upload="afteruploadcallback"><i class="fa fa-upload"></i> {:__("Upload to local")}</button>
<button id="plupload-local" class="btn btn-primary plupload" data-input-id="c-local" data-url="{:url('ajax/upload')}"><i class="fa fa-upload"></i> {:__("Upload to local")}</button>
</div>
</div>
... ...
<style type="text/css">
@media (max-width: 375px) {
.edit-form tr td input{width:100%;}
.edit-form tr th:first-child,.edit-form tr td:first-child{
width:20%;
}
.edit-form tr th:last-child,.edit-form tr td:last-child{
display: none;
}
}
</style>
<div class="panel panel-default panel-intro">
<div class="panel-heading">
<div class="panel-lead"><em>系统配置</em>可以在此增改系统的变量和分组,也可以自定义分组和变量,如果需要删除请从数据库中删除</div>
... ...
... ... @@ -6,7 +6,7 @@
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div class="weixin-menu-setting">
<div class="weixin-menu-setting clearfix">
<div class="mobile-menu-preview">
<div class="mobile-head-title">{$site.name}</div>
<ul class="menu-list" id="menu-list">
... ... @@ -15,53 +15,55 @@
</li>
</ul>
</div>
<div class="weixin-content">
<div class="item-info">
<form id="form-item" class="form-item" data-value="" >
<div class="item-head">
<h4 id="current-item-name">添加子菜单</h4>
<div class="item-delete"><a href="javascript:;" id="item_delete">删除菜单</a></div>
</div>
<div style="margin-top: 20px;">
<dl>
<dt id="current-item-option"><span class="is-sub-item"></span>菜单标题:</dt>
<dd><div class="input-box"><input id="item_title" name="item-title" type="text" value=""></div></dd>
</dl>
<dl class="is-item">
<dt id="current-item-type"><span class="is-sub-item"></span>菜单内容:</dt>
<dd>
<input id="type1" type="radio" name="type" value="click"><label for="type1" data-editing="1"><span class="lbl_content">发送消息</span></label>
<input id="type2" type="radio" name="type" value="view" ><label for="type2" data-editing="1"><span class="lbl_content">跳转网页</span></label>
<input id="type3" type="radio" name="type" value="scancode_push"><label for="type3" data-editing="1"><span class="lbl_content">扫码推</span></label>
<input id="type4" type="radio" name="type" value="scancode_waitmsg"><label for="type4" data-editing="1"><span class="lbl_content">扫码推提示框</span></label>
<input id="type5" type="radio" name="type" value="pic_sysphoto"><label for="type5" data-editing="1"><span class="lbl_content">拍照发图</span></label>
<input id="type6" type="radio" name="type" value="pic_photo_or_album"><label for="type6" data-editing="1"><span class="lbl_content">拍照相册发图</span></label>
<input id="type7" type="radio" name="type" value="pic_weixin"><label for="type7" data-editing="1"><span class="lbl_content">相册发图</span></label>
<input id="type8" type="radio" name="type" value="location_select"><label for="type8" data-editing="1"><span class="lbl_content">地理位置选择</span></label>
</dd>
</dl>
<div id="menu-content" class="is-item">
<div class="viewbox is-view">
<p class="menu-content-tips">点击该<span class="is-sub-item"></span>菜单会跳到以下链接</p>
<dl>
<dt>页面地址:</dt>
<dd><div class="input-box"><input type="text" id="url" name="url"></div>
</dd>
</dl>
</div>
<div class="clickbox is-click" style="display: none;">
<input type="hidden" name="key" id="key" value="" />
<span class="create-click"><a href="{:url('wechat.response/select')}" id="select-resources"><i class="weixin-icon big-add-gray"></i><strong>选择现有资源</strong></a></span>
<span class="create-click"><a href="{:url('wechat.response/add')}" id="add-resources"><i class="weixin-icon big-add-gray"></i><strong>添加新资源</strong></a></span>
<div class="weixin-body">
<div class="weixin-content" style="display:none">
<div class="item-info">
<form id="form-item" class="form-item" data-value="" >
<div class="item-head">
<h4 id="current-item-name">添加子菜单</h4>
<div class="item-delete"><a href="javascript:;" id="item_delete">删除菜单</a></div>
</div>
<div style="margin-top: 20px;">
<dl>
<dt id="current-item-option"><span class="is-sub-item"></span>菜单标题:</dt>
<dd><div class="input-box"><input id="item_title" name="item-title" type="text" value=""></div></dd>
</dl>
<dl class="is-item">
<dt id="current-item-type"><span class="is-sub-item"></span>菜单内容:</dt>
<dd>
<input id="type1" type="radio" name="type" value="click"><label for="type1" data-editing="1"><span class="lbl_content">发送消息</span></label>
<input id="type2" type="radio" name="type" value="view" ><label for="type2" data-editing="1"><span class="lbl_content">跳转网页</span></label>
<input id="type3" type="radio" name="type" value="scancode_push"><label for="type3" data-editing="1"><span class="lbl_content">扫码推</span></label>
<input id="type4" type="radio" name="type" value="scancode_waitmsg"><label for="type4" data-editing="1"><span class="lbl_content">扫码推提示框</span></label>
<input id="type5" type="radio" name="type" value="pic_sysphoto"><label for="type5" data-editing="1"><span class="lbl_content">拍照发图</span></label>
<input id="type6" type="radio" name="type" value="pic_photo_or_album"><label for="type6" data-editing="1"><span class="lbl_content">拍照相册发图</span></label>
<input id="type7" type="radio" name="type" value="pic_weixin"><label for="type7" data-editing="1"><span class="lbl_content">相册发图</span></label>
<input id="type8" type="radio" name="type" value="location_select"><label for="type8" data-editing="1"><span class="lbl_content">地理位置选择</span></label>
</dd>
</dl>
<div id="menu-content" class="is-item">
<div class="viewbox is-view">
<p class="menu-content-tips">点击该<span class="is-sub-item"></span>菜单会跳到以下链接</p>
<dl>
<dt>页面地址:</dt>
<dd><div class="input-box"><input type="text" id="url" name="url"></div>
</dd>
</dl>
</div>
<div class="clickbox is-click" style="display: none;">
<input type="hidden" name="key" id="key" value="" />
<span class="create-click"><a href="{:url('wechat.response/select')}" id="select-resources"><i class="weixin-icon big-add-gray"></i><strong>选择现有资源</strong></a></span>
<span class="create-click"><a href="{:url('wechat.response/add')}" id="add-resources"><i class="weixin-icon big-add-gray"></i><strong>添加新资源</strong></a></span>
</div>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
</div>
<div class="no-weixin-content">
点击左侧菜单进行编辑操作
</div>
<div class="no-weixin-content">
点击左侧菜单进行编辑操作
</div>
</div>
</div>
<div class="row">
... ...
... ... @@ -28,4 +28,6 @@ return array (
'user' => '会员配置',
'example' => '示例分组',
),
'aaaa' => '',
'ffff' => 'key2',
);
\ No newline at end of file
... ...
... ... @@ -77,6 +77,20 @@ body.is-dialog {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
@media only screen and (min-width: 481px) {
.row-flex {
display: flex;
flex-wrap: wrap;
}
.row-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
.row-flex.row:after,
.row-flex.row:before {
display: flex;
}
}
.common-search-table {
min-height: 20px;
padding: 15px;
... ... @@ -86,6 +100,14 @@ body.is-dialog {
.searchit {
border-bottom: 1px dashed #3c8dbc;
}
table.table-template {
overflow: hidden;
}
.sp_container .msg-box {
position: absolute;
right: 0;
top: 0;
}
.toast-top-right-index {
top: 62px;
right: 12px;
... ...
.weixin-menu-setting{
margin:0;
position:relative;
margin-bottom:10px;
width:100%;
}
.mobile-head-title{
color: #fff;
... ... @@ -15,12 +15,12 @@
word-wrap: normal;
margin: 0 40px 0 70px;
}
.weixin-body {
padding:0;
margin:0;
margin-left:337px;
}
.weixin-content,.no-weixin-content{
position:absolute;
left: 335px;
top:0;
right:0px;
bottom:0;
background-color: #f4f5f9;
border: 1px solid #e7e7eb;
padding:15px;
... ... @@ -31,7 +31,12 @@
vertical-align: middle;
padding-top:200px;
text-align: center;
}
@media (max-width: 720px) {
.weixin-body {
margin-left:0;
margin-top:560px;
}
}
.weixin-menu-title{
border-bottom: 1px solid #e7e7eb;
... ... @@ -41,13 +46,16 @@
margin-bottom: 20px;
}
.mobile-menu-preview{
position: relative;
display:block;
float:left;
position:relative;
width: 317px;
height: 550px;
background: transparent url(../../img/wx_mobile_header_bg.png) no-repeat 0 0;
background-position: 0 0;
border: 1px solid #e7e7eb;
}
.mobile-menu-preview .menu-list {
position: absolute;
height:50px;
... ... @@ -257,7 +265,7 @@ table.weixin-form td{
margin:10px 0;
}
.form-item dl dt{
width:6em;
width:90px;
height: 30px;
line-height: 30px;
text-align: right;
... ... @@ -267,12 +275,12 @@ table.weixin-form td{
left:0;
bottom:0;
display:block;
}
.form-item dl dd{
position:relative;
display:block;
margin-left: 7em;
margin-left: 90px;
line-height: 30px;
}
.form-item .input-box {
display: inline-block;
... ... @@ -297,6 +305,7 @@ table.weixin-form td{
background-color: transparent;
border: 0;
outline: 0;
height:30px;
}
.clickbox{
... ...
... ... @@ -204,7 +204,7 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang', 'moment'], function ($
if (layerfooter.size() > 0) {
footer.on("click", ".btn", function () {
if ($(this).hasClass("disabled") || $(this).parent().hasClass("disabled")) {
//return;
return;
}
$(".btn:eq(" + $(this).index() + ")", layerfooter).trigger("click");
});
... ... @@ -347,13 +347,13 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang', 'moment'], function ($
Toastr.options = Backend.config.toastr;
//点击包含.btn-dialog的元素时弹出dialog
$(document).on('click', '.btn-dialog,.dialogit', function (e) {
Backend.api.open(Backend.api.fixurl($(this).attr('href')), $(this).attr('title'));
e.preventDefault();
Backend.api.open(Backend.api.fixurl($(this).attr('href')), $(this).attr('title'));
});
//点击包含.btn-addtabs的元素时事件
$(document).on('click', '.btn-addtabs,.addtabsit', function (e) {
Backend.api.addtabs($(this).attr("href"), $(this).attr("title"));
e.preventDefault();
Backend.api.addtabs($(this).attr("href"), $(this).attr("title"));
});
//点击加入到Shortcut
$(document).on('click', '#ribbon ol li:last a[data-url]', function (e) {
... ...
... ... @@ -36,7 +36,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
left: 'left',
top: 'top',
right: '10',
bottom:30
bottom: 30
}],
series: [{
name: '成交',
... ... @@ -48,7 +48,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
},
lineStyle: {
normal: {
width:1.5
width: 1.5
}
},
data: Orderdata.paydata
... ... @@ -63,7 +63,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
},
lineStyle: {
normal: {
width:1.5
width: 1.5
}
},
data: Orderdata.createdata
... ... @@ -72,8 +72,37 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$(window).resize(function(){
myChart.resize();
//动态添加数据,可以通过Ajax获取数据然后填充
setInterval(function () {
Orderdata.column.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
var amount = Math.floor(Math.random() * 200) + 20;
Orderdata.createdata.push(amount);
Orderdata.paydata.push(Math.floor(Math.random() * amount) + 1);
//按自己需求可以取消这个限制
if (Orderdata.column.length >= 20) {
//移除最开始的一条数据
Orderdata.column.shift();
Orderdata.paydata.shift();
Orderdata.createdata.shift();
}
myChart.setOption({
xAxis: {
data: Orderdata.column
},
series: [{
name: '成交',
data: Orderdata.paydata
},
{
name: '下单',
data: Orderdata.createdata
}]
});
}, 2000);
$(window).resize(function () {
myChart.resize();
});
}
};
... ...
... ... @@ -20,13 +20,16 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
//该列为复选框字段,如果后台的返回state值将会默认选中
{field: 'state', 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'), operate: 'LIKE %...%', placeholder: '模糊搜索,*表示任意字符', style: 'width:200px'},
//通过Ajax渲染searchList
//通过Ajax渲染searchList,也可以使用JSON数据
{field: 'url', title: __('Url'), align: 'left', searchList: $.getJSON('ajax/typeahead?search=a&field=row[user_id]'), 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},
... ... @@ -70,7 +73,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},
formatter: {
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>';
},
... ... @@ -89,8 +92,9 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
+ Table.api.formatter.operate(value, row, index, $("#table"));
},
},
events: {
events: {//绑定事件的方法
ip: {
//格式为:方法名+空格+DOM元素
'click .btn-ip': function (e, value, row, index) {
var options = $("#table").bootstrapTable('getOptions');
//这里我们手动将数据填充到表单然后提交
... ...
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', searchList: $.getJSON('ajax/typeahead?search=a&field=row[user_id]'), 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: 'BETWEEN', type: 'datetime', addclass: 'datetimepicker', data: 'data-date-format="YYYY-MM-DD HH:mm:ss"'},
//我们向操作栏额外添加上一个详情按钮,并保留已有的编辑和删除控制,同时为这个按钮添加上点击事件
{field: 'operate', title: __('Operate'), events: Controller.api.events.operate, formatter: Controller.api.formatter.operate}
],
],
//禁用默认搜索
search: false,
//启用普通表单搜索
commonSearch: false,
//可以控制是否默认显示搜索单表,false则隐藏,默认为false
searchFormVisible: false
});
// 为表格绑定事件
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>';
},
operate: function (value, row, index) {
//返回字符串加上Table.api.formatter.operate的结果
//默认需要按需显示排序/编辑/删除按钮,则需要在Table.api.formatter.operate将table传入
//传入了table以后如果edit_url为空则不显示编辑按钮,如果del_url为空则不显显删除按钮
return '<a class="btn btn-info btn-xs btn-detail"><i class="fa fa-list"></i> ' + __('Detail') + '</a> '
+ Table.api.formatter.operate(value, row, index, $("#table"));
},
},
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>");
}
},
operate: $.extend({
'click .btn-detail': function (e, value, row, index) {
Backend.api.open('example/tabletemplate/detail/ids/' + row['id'], __('Detail'));
}
}, Table.api.events.operate)
}
}
};
return Controller;
});
\ No newline at end of file
... ...
... ... @@ -27,7 +27,8 @@ define(['jquery', 'bootstrap', 'backend', 'form', 'table'], function ($, undefin
{field: 'text', title: __('Text')},
{field: 'eventkey', title: __('Event key')},
{field: 'remark', title: __('Remark')},
{field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime},
{field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Update time'), formatter: Table.api.formatter.datetime},
{field: 'status', title: __('Status'), formatter: Table.api.formatter.status},
{field: 'operate', title: __('Operate'), events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
... ...
... ... @@ -8,19 +8,19 @@
!function ($) {
'use strict';
var firstLoad = false, ColumnsForSearch = [];
var ColumnsForSearch = [];
var sprintf = $.fn.bootstrapTable.utils.sprintf;
var initCommonSearch = function (pColumns, that) {
var vFormCommon = createFormCommon(pColumns, that), timeoutId = 0;
var vFormCommon = createFormCommon(pColumns, that);
var vModal = sprintf("<div id=\"commonSearchContent_%s\" class=\"common-search-table %s\">", that.options.idTable, that.options.searchFormVisible ? "" : "hidden");
var vModal = sprintf("<div class=\"commonsearch-table %s\">", that.options.searchFormVisible ? "" : "hidden");
vModal += vFormCommon.join('');
vModal += "</div>";
that.$container.prepend($(vModal));
var form = $("#commonSearchForm" + "_" + that.options.idTable);
var form = $("form.form-commonsearch", that.$container);
//绑定日期时间元素事件
if ($(".datetimepicker", form).size() > 0) {
... ... @@ -48,12 +48,13 @@
// 表单提交
form.on("submit", function (event) {
event.preventDefault();
that.onColumnCommonSearch();
return false;
});
// 重置搜索
form.on("click", "#btnResetCommon" + "_" + that.options.idTable, function (event) {
form.on("click", "button[type=reset]", function (event) {
form[0].reset();
that.onColumnCommonSearch();
});
... ... @@ -63,7 +64,7 @@
var createFormCommon = function (pColumns, that) {
var htmlForm = [];
var opList = ['=', '>', '>=', '<', '<=', '!=', 'LIKE', 'LIKE %...%', 'NOT LIKE', 'IN(...)', 'NOT IN(...)', 'BETWEEN', 'NOT BETWEEN', 'IS NULL', 'IS NOT NULL'];
htmlForm.push(sprintf('<form class="form-inline" id="commonSearchForm_%s" action="%s" >', that.options.idTable, that.options.actionForm));
htmlForm.push(sprintf('<form class="form-inline form-commonsearch" action="%s" >', that.options.actionForm));
htmlForm.push('<fieldset>');
if (that.options.titleForm.length > 0)
htmlForm.push(sprintf("<legend>%s</legend>", that.options.titleForm));
... ... @@ -83,7 +84,7 @@
if (vObjCol.searchList) {
if (typeof vObjCol.searchList === 'object' && typeof vObjCol.searchList.then === 'function') {
htmlForm.push(sprintf('<select class="form-control" name="%s" %s>%s</select>', vObjCol.field, style, sprintf('<option value="">%s</option>', that.options.formatCommonChoose())));
(function (vObjCol, options) {
(function (vObjCol, that) {
$.when(vObjCol.searchList).done(function (ret) {
if (ret.data && ret.data.searchlist && $.isArray(ret.data.searchlist)) {
var optionList = [];
... ... @@ -91,10 +92,10 @@
var isSelect = value.id === vObjCol.defaultValue ? 'selected' : '';
optionList.push(sprintf("<option value='" + value.id + "' %s>" + value.name + "</option>", isSelect));
});
$("#commonSearchForm_" + options.idTable + " select[name='" + vObjCol.field + "']").append(optionList.join(''));
$("form.form-commonsearch select[name='" + vObjCol.field + "']", that.$container).append(optionList.join(''));
}
});
})(vObjCol, that.options);
})(vObjCol, that);
} else if (typeof vObjCol.searchList == 'function') {
htmlForm.push(vObjCol.searchList.call(this, vObjCol));
} else {
... ... @@ -139,29 +140,27 @@
var searchReset = that.options.formatCommonResetButton();
htmlBtn.push('<div class="form-group" style="margin:5px">');
htmlBtn.push('<div class="col-sm-12 text-center">');
htmlBtn.push(sprintf('<button type="submit" id="btnSubmitCommon%s" class="btn btn-success" >%s</button> ', "_" + that.options.idTable, searchSubmit));
htmlBtn.push(sprintf('<button type="button" id="btnResetCommon%s" class="btn btn-default" >%s</button> ', "_" + that.options.idTable, searchReset));
htmlBtn.push(sprintf('<button type="submit" class="btn btn-success" >%s</button> ', searchSubmit));
htmlBtn.push(sprintf('<button type="reset" class="btn btn-default" >%s</button> ', searchReset));
htmlBtn.push('</div>');
htmlBtn.push('</div>');
return htmlBtn;
};
var isSearchAvailble = function (that) {
//只支持服务端搜索
if (!that.options.commonSearch || that.options.sidePagination != 'server' || !that.options.url) {
return false;
}
if (!that.options.idTable) {
return false;
}
return true;
};
var getSearchQuery = function (that) {
var op = {};
var filter = {};
$("#commonSearchContent_" + that.options.idTable + " input.operate").each(function (i) {
$("form.form-commonsearch input.operate", that.$container).each(function (i) {
var name = $(this).data("name");
var sym = $(this).val();
var obj = $("[name='" + name + "']");
... ... @@ -206,7 +205,6 @@
commonSearch: false,
titleForm: "Common search",
actionForm: "",
idTable: undefined,
searchFormVisible: true,
searchClass: 'searchit',
renderDefault: true,
... ... @@ -266,7 +264,7 @@
initCommonSearch(that.columns, that);
var searchContainer = $("#commonSearchContent_" + that.options.idTable);
var searchContainer = $(".commonsearch-table", that.$container);
that.$toolbar.find('button[name="commonSearch"]')
.off('click').on('click', function () {
... ... @@ -299,12 +297,6 @@
if (!isSearchAvailble(this)) {
return;
}
if (!firstLoad) {
var height = parseInt($(".bootstrap-table").height());
height += 10;
$("#" + this.options.idTable).bootstrapTable("resetView", {height: height});
firstLoad = true;
}
};
BootstrapTable.prototype.initSearch = function () {
... ...
!function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
templateView: false,
templateFormatter: "itemtpl",
templateParentClass: "row row-flex",
templateTableClass: "table-template",
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initContainer = BootstrapTable.prototype.initContainer,
_initBody = BootstrapTable.prototype.initBody,
_initRow = BootstrapTable.prototype.initRow;
BootstrapTable.prototype.initContainer = function () {
_initContainer.apply(this, Array.prototype.slice.apply(arguments));
var that = this;
if (!that.options.templateView) {
return;
}
};
BootstrapTable.prototype.initBody = function () {
var that = this;
$.extend(that.options, {
showHeader: !that.options.templateView ? $.fn.bootstrapTable.defaults.showHeader : false,
showFooter: !that.options.templateView ? $.fn.bootstrapTable.defaults.showFooter : false,
});
$(that.$el).toggleClass(that.options.templateTableClass, that.options.templateView);
_initBody.apply(this, Array.prototype.slice.apply(arguments));
if (!that.options.templateView) {
return;
} else {
//由于Bootstrap是基于Table的,添加一个父类容器
$("> *", that.$body).wrapAll($("<div />").addClass(that.options.templateParentClass));
}
};
BootstrapTable.prototype.initRow = function (item, i, data, parentDom) {
var that = this;
//如果未启用则使用原生的initRow方法
if (!that.options.templateView) {
return _initRow.apply(that, Array.prototype.slice.apply(arguments));
}
var $content = '';
if (typeof that.options.templateFormatter === 'function') {
$content = that.options.templateFormatter.call(that, item, i, data);
} else {
var Template = require('template');
$content = Template(that.options.templateFormatter, {item: item, i: i, data: data});
}
return $content;
};
}(jQuery);
... ...
... ... @@ -19,6 +19,7 @@ require.config({
'echarts-theme': 'echarts-theme',
'adminlte': 'adminlte',
'bootstrap-table-commonsearch': 'bootstrap-table-commonsearch',
'bootstrap-table-template': 'bootstrap-table-template',
//
// 以下的包从bower的libs目录加载
'jquery': '../libs/jquery/dist/jquery.min',
... ... @@ -81,6 +82,10 @@ require.config({
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-template': {
deps: ['bootstrap-table', 'template'],
exports: '$.fn.bootstrapTable.defaults'
},
'tableexport': {
deps: ['jquery'],
exports: '$.fn.extend'
... ... @@ -121,6 +126,7 @@ require.config({
'css': '../libs/require-css/css.min'
}
},
waitSeconds: 30,
charset: 'utf-8' // 文件编码
});
... ...
... ... @@ -33,6 +33,7 @@ require.config({
'echarts-theme': 'echarts-theme',
'adminlte': 'adminlte',
'bootstrap-table-commonsearch': 'bootstrap-table-commonsearch',
'bootstrap-table-template': 'bootstrap-table-template',
//
// 以下的包从bower的libs目录加载
'jquery': '../libs/jquery/dist/jquery.min',
... ... @@ -95,6 +96,10 @@ require.config({
deps: ['bootstrap-table'],
exports: '$.fn.bootstrapTable.defaults'
},
'bootstrap-table-template': {
deps: ['bootstrap-table', 'template'],
exports: '$.fn.bootstrapTable.defaults'
},
'tableexport': {
deps: ['jquery'],
exports: '$.fn.extend'
... ... @@ -135,6 +140,7 @@ require.config({
'css': '../libs/require-css/css.min'
}
},
waitSeconds: 30,
charset: 'utf-8' // 文件编码
});
... ... @@ -6609,7 +6615,7 @@ define('backend',['jquery', 'bootstrap', 'toastr', 'layer', 'lang', 'moment'], f
if (layerfooter.size() > 0) {
footer.on("click", ".btn", function () {
if ($(this).hasClass("disabled") || $(this).parent().hasClass("disabled")) {
//return;
return;
}
$(".btn:eq(" + $(this).index() + ")", layerfooter).trigger("click");
});
... ... @@ -6752,13 +6758,13 @@ define('backend',['jquery', 'bootstrap', 'toastr', 'layer', 'lang', 'moment'], f
Toastr.options = Backend.config.toastr;
//点击包含.btn-dialog的元素时弹出dialog
$(document).on('click', '.btn-dialog,.dialogit', function (e) {
Backend.api.open(Backend.api.fixurl($(this).attr('href')), $(this).attr('title'));
e.preventDefault();
Backend.api.open(Backend.api.fixurl($(this).attr('href')), $(this).attr('title'));
});
//点击包含.btn-addtabs的元素时事件
$(document).on('click', '.btn-addtabs,.addtabsit', function (e) {
Backend.api.addtabs($(this).attr("href"), $(this).attr("title"));
e.preventDefault();
Backend.api.addtabs($(this).attr("href"), $(this).attr("title"));
});
//点击加入到Shortcut
$(document).on('click', '#ribbon ol li:last a[data-url]', function (e) {
... ... @@ -7224,19 +7230,19 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
!function ($) {
'use strict';
var firstLoad = false, ColumnsForSearch = [];
var ColumnsForSearch = [];
var sprintf = $.fn.bootstrapTable.utils.sprintf;
var initCommonSearch = function (pColumns, that) {
var vFormCommon = createFormCommon(pColumns, that), timeoutId = 0;
var vFormCommon = createFormCommon(pColumns, that);
var vModal = sprintf("<div id=\"commonSearchContent_%s\" class=\"common-search-table %s\">", that.options.idTable, that.options.searchFormVisible ? "" : "hidden");
var vModal = sprintf("<div class=\"commonsearch-table %s\">", that.options.searchFormVisible ? "" : "hidden");
vModal += vFormCommon.join('');
vModal += "</div>";
that.$container.prepend($(vModal));
var form = $("#commonSearchForm" + "_" + that.options.idTable);
var form = $("form.form-commonsearch", that.$container);
//绑定日期时间元素事件
if ($(".datetimepicker", form).size() > 0) {
... ... @@ -7264,12 +7270,13 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
// 表单提交
form.on("submit", function (event) {
event.preventDefault();
that.onColumnCommonSearch();
return false;
});
// 重置搜索
form.on("click", "#btnResetCommon" + "_" + that.options.idTable, function (event) {
form.on("click", "button[type=reset]", function (event) {
form[0].reset();
that.onColumnCommonSearch();
});
... ... @@ -7279,7 +7286,7 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
var createFormCommon = function (pColumns, that) {
var htmlForm = [];
var opList = ['=', '>', '>=', '<', '<=', '!=', 'LIKE', 'LIKE %...%', 'NOT LIKE', 'IN(...)', 'NOT IN(...)', 'BETWEEN', 'NOT BETWEEN', 'IS NULL', 'IS NOT NULL'];
htmlForm.push(sprintf('<form class="form-inline" id="commonSearchForm_%s" action="%s" >', that.options.idTable, that.options.actionForm));
htmlForm.push(sprintf('<form class="form-inline form-commonsearch" action="%s" >', that.options.actionForm));
htmlForm.push('<fieldset>');
if (that.options.titleForm.length > 0)
htmlForm.push(sprintf("<legend>%s</legend>", that.options.titleForm));
... ... @@ -7299,7 +7306,7 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
if (vObjCol.searchList) {
if (typeof vObjCol.searchList === 'object' && typeof vObjCol.searchList.then === 'function') {
htmlForm.push(sprintf('<select class="form-control" name="%s" %s>%s</select>', vObjCol.field, style, sprintf('<option value="">%s</option>', that.options.formatCommonChoose())));
(function (vObjCol, options) {
(function (vObjCol, that) {
$.when(vObjCol.searchList).done(function (ret) {
if (ret.data && ret.data.searchlist && $.isArray(ret.data.searchlist)) {
var optionList = [];
... ... @@ -7307,10 +7314,10 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
var isSelect = value.id === vObjCol.defaultValue ? 'selected' : '';
optionList.push(sprintf("<option value='" + value.id + "' %s>" + value.name + "</option>", isSelect));
});
$("#commonSearchForm_" + options.idTable + " select[name='" + vObjCol.field + "']").append(optionList.join(''));
$("form.form-commonsearch select[name='" + vObjCol.field + "']", that.$container).append(optionList.join(''));
}
});
})(vObjCol, that.options);
})(vObjCol, that);
} else if (typeof vObjCol.searchList == 'function') {
htmlForm.push(vObjCol.searchList.call(this, vObjCol));
} else {
... ... @@ -7355,29 +7362,27 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
var searchReset = that.options.formatCommonResetButton();
htmlBtn.push('<div class="form-group" style="margin:5px">');
htmlBtn.push('<div class="col-sm-12 text-center">');
htmlBtn.push(sprintf('<button type="submit" id="btnSubmitCommon%s" class="btn btn-success" >%s</button> ', "_" + that.options.idTable, searchSubmit));
htmlBtn.push(sprintf('<button type="button" id="btnResetCommon%s" class="btn btn-default" >%s</button> ', "_" + that.options.idTable, searchReset));
htmlBtn.push(sprintf('<button type="submit" class="btn btn-success" >%s</button> ', searchSubmit));
htmlBtn.push(sprintf('<button type="reset" class="btn btn-default" >%s</button> ', searchReset));
htmlBtn.push('</div>');
htmlBtn.push('</div>');
return htmlBtn;
};
var isSearchAvailble = function (that) {
//只支持服务端搜索
if (!that.options.commonSearch || that.options.sidePagination != 'server' || !that.options.url) {
return false;
}
if (!that.options.idTable) {
return false;
}
return true;
};
var getSearchQuery = function (that) {
var op = {};
var filter = {};
$("#commonSearchContent_" + that.options.idTable + " input.operate").each(function (i) {
$("form.form-commonsearch input.operate", that.$container).each(function (i) {
var name = $(this).data("name");
var sym = $(this).val();
var obj = $("[name='" + name + "']");
... ... @@ -7422,7 +7427,6 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
commonSearch: false,
titleForm: "Common search",
actionForm: "",
idTable: undefined,
searchFormVisible: true,
searchClass: 'searchit',
renderDefault: true,
... ... @@ -7482,7 +7486,7 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
initCommonSearch(that.columns, that);
var searchContainer = $("#commonSearchContent_" + that.options.idTable);
var searchContainer = $(".commonsearch-table", that.$container);
that.$toolbar.find('button[name="commonSearch"]')
.off('click').on('click', function () {
... ... @@ -7515,12 +7519,6 @@ return d.keepInvalid=a,l},l.datepickerInput=function(a){if(0===arguments.length)
if (!isSearchAvailble(this)) {
return;
}
if (!firstLoad) {
var height = parseInt($(".bootstrap-table").height());
height += 10;
$("#" + this.options.idTable).bootstrapTable("resetView", {height: height});
firstLoad = true;
}
};
BootstrapTable.prototype.initSearch = function () {
... ... @@ -7595,7 +7593,77 @@ define("bootstrap-table-commonsearch", ["bootstrap-table"], (function (global) {
};
}(this)));
define('table',['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-mobile', 'bootstrap-table-export', 'bootstrap-table-commonsearch'], function ($, undefined, Backend, Toastr, Moment) {
/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(a){throw a.temp="function anonymous($data,$filename) {"+z+"}",a}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a)(b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;c<d;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(a){return a.filename=h||"anonymous",a.name="Syntax Error",p(a)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;"object"==typeof exports&&"undefined"!=typeof module?module.exports=d:"function"==typeof define?define('template',[],function(){return d}):this.template=d}();
!function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
templateView: false,
templateFormatter: "itemtpl",
templateParentClass: "row row-flex",
templateTableClass: "table-template",
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initContainer = BootstrapTable.prototype.initContainer,
_initBody = BootstrapTable.prototype.initBody,
_initRow = BootstrapTable.prototype.initRow;
BootstrapTable.prototype.initContainer = function () {
_initContainer.apply(this, Array.prototype.slice.apply(arguments));
var that = this;
if (!that.options.templateView) {
return;
}
};
BootstrapTable.prototype.initBody = function () {
var that = this;
$.extend(that.options, {
showHeader: !that.options.templateView ? $.fn.bootstrapTable.defaults.showHeader : false,
showFooter: !that.options.templateView ? $.fn.bootstrapTable.defaults.showFooter : false,
});
$(that.$el).toggleClass(that.options.templateTableClass, that.options.templateView);
_initBody.apply(this, Array.prototype.slice.apply(arguments));
if (!that.options.templateView) {
return;
} else {
//由于Bootstrap是基于Table的,添加一个父类容器
$("> *", that.$body).wrapAll($("<div />").addClass(that.options.templateParentClass));
}
};
BootstrapTable.prototype.initRow = function (item, i, data, parentDom) {
var that = this;
//如果未启用则使用原生的initRow方法
if (!that.options.templateView) {
return _initRow.apply(that, Array.prototype.slice.apply(arguments));
}
var $content = '';
if (typeof that.options.templateFormatter === 'function') {
$content = that.options.templateFormatter.call(that, item, i, data);
} else {
var Template = require('template');
$content = Template(that.options.templateFormatter, {item: item, i: i, data: data});
}
return $content;
};
}(jQuery);
define("bootstrap-table-template", ["bootstrap-table","template"], (function (global) {
return function () {
var ret, fn;
return ret || global.$.fn.bootstrapTable.defaults;
};
}(this)));
define('table',['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-mobile', 'bootstrap-table-export', 'bootstrap-table-commonsearch', 'bootstrap-table-template'], function ($, undefined, Backend, Toastr, Moment) {
var Table = {
list: {},
// Bootstrap-table 基础配置
... ... @@ -7738,8 +7806,9 @@ define('table',['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap
});
// 处理选中筛选框后按钮的状态统一变更
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$(Table.config.disabledbtn, toolbar).toggleClass('disabled', !table.bootstrapTable('getSelections').length);
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table fa.event.check', function () {
var ids = Table.api.selectedids(table);
$(Table.config.disabledbtn, toolbar).toggleClass('disabled', !ids.length);
});
// 刷新按钮事件
... ... @@ -7751,7 +7820,7 @@ define('table',['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap
var ids = Table.api.selectedids(table);
Backend.api.open(options.extend.add_url + "/ids" + (ids.length > 0 ? '/' : '') + ids.join(","), __('Add'));
});
// 编辑按钮事件
// 批量编辑按钮事件
$(toolbar).on('click', Table.config.editbtn, function () {
var ids = Table.api.selectedids(table);
//循环弹出多个编辑框
... ... @@ -7812,6 +7881,27 @@ define('table',['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap
placeHolderTemplate: ""
});
});
$(table).on("click", "input[data-id][name='checkbox']", function (e) {
table.trigger('fa.event.check');
});
$(table).on("click", "[data-id].btn-edit", function (e) {
e.preventDefault();
Backend.api.open(options.extend.edit_url + "/ids/" + $(this).data("id"), __('Edit'));
});
$(table).on("click", "[data-id].btn-del", function (e) {
e.preventDefault();
var id = $(this).data("id");
var that = this;
var index = Backend.api.layer.confirm(
__('Are you sure you want to delete this item?'),
{icon: 3, title: __('Warning'), shadeClose: true},
function () {
Table.api.multi("del", id, table, that);
Backend.api.layer.close(index);
}
);
});
var id = table.attr("id");
Table.list[id] = table;
... ... @@ -7952,9 +8042,15 @@ define('table',['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap
// 获取选中的条目ID集合
selectedids: function (table) {
var options = table.bootstrapTable('getOptions');
return $.map(table.bootstrapTable('getSelections'), function (row) {
return row[options.pk];
});
if (options.templateView) {
return $.map($("input[data-id][name='checkbox']:checked"), function (dom) {
return $(dom).data("id");
});
} else {
return $.map(table.bootstrapTable('getSelections'), function (row) {
return row[options.pk];
});
}
},
// 切换复选框状态
toggleattr: function (table) {
... ... @@ -8380,8 +8476,6 @@ define("../libs/plupload/js/moxie.min", function(){});
define("dragsort", function(){});
/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(a){throw a.temp="function anonymous($data,$filename) {"+z+"}",a}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a)(b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;c<d;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(a){return a.filename=h||"anonymous",a.name="Syntax Error",p(a)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;"object"==typeof exports&&"undefined"!=typeof module?module.exports=d:"function"==typeof define?define('template',[],function(){return d}):this.template=d}();
define('upload',['jquery', 'bootstrap', 'backend', 'plupload', 'dragsort', 'template'], function ($, undefined, Backend, Plupload, Dragsort, Template) {
var Upload = {
list: {},
... ... @@ -10951,6 +11045,9 @@ define('form',['jquery', 'bootstrap', 'backend', 'toastr', 'upload', 'validator'
return false;
},
bindevent: function (form, onBeforeSubmit, onAfterSubmit) {
//移除提交按钮的disabled类
$(".layer-footer .btn.disabled", form).removeClass("disabled");
//绑定表单事件
form.validator($.extend({
validClass: 'has-success',
invalidClass: 'has-error',
... ... @@ -11001,6 +11098,10 @@ define('form',['jquery', 'bootstrap', 'backend', 'toastr', 'upload', 'validator'
source: 'ajax/selectpage',
});
});
//给隐藏的元素添加上validate验证触发事件
$(form).on("change", ".selectpage-input-hidden", function () {
$(this).trigger("validate");
});
}
//绑定cxselect元素事件
... ... @@ -11160,7 +11261,9 @@ $.fn.addtabs = function (options) {
//浏览器前进后退事件
$(window).on("popstate", function (e) {
var state = e.originalEvent.state;
$("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
if (state) {
$("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
}
});
}
$(options.monitor).on('click', '[addtabs]', function (e) {
... ... @@ -11473,6 +11576,11 @@ define("addtabs", function(){});
*/
format_item: false,
/**
* 是否使用Formatter的text文本来填充文本框
*/
format_fill: false,
//只选择模式
select_only: true,
}, option);
... ... @@ -11883,6 +11991,7 @@ define("addtabs", function(){});
id: input_id
});
}
$(elem.hidden).addClass("selectpage-input-hidden");
// 2. DOM内容放置
$(elem.container).append(elem.button).append(elem.result_area).append(elem.hidden);
$(elem.button).append(elem.img);
... ... @@ -12060,6 +12169,7 @@ define("addtabs", function(){});
//该句会去除当前高亮项目的显示,暂时屏蔽
//$(self.elem.results).children('li').removeClass(self.css_class.select);
}).blur(function () {
$(self.elem.hidden).trigger("blur");
});
if (self.option.multiple) {
$(self.elem.element_box).click(function (e) {
... ... @@ -12942,6 +13052,7 @@ define("addtabs", function(){});
//XSS対策
var list = $('<li>').html(itemText).attr({
pkey: arr_primary_key[i],
pvalue: arr_candidate[i],
title: itemText
});
... ... @@ -13218,13 +13329,15 @@ define("addtabs", function(){});
var current = self._getCurrentLine(self);
if (current) {
var pkey = $(current).attr('pkey');
var text = self.option.format_fill ? $(current).text() : $(current).attr("pvalue");
if (!self.option.multiple) {
$(self.elem.combo_input).val($(current).text());
self._setHiddenValue($(current).attr('pkey'));
$(self.elem.combo_input).val(text);
self._setHiddenValue(pkey);
} else {
//多选模式的项目选择处理
$(self.elem.combo_input).val('');
var item = {text: $(current).text(), value: $(current).attr('pkey')};
var item = {text: text, value: pkey};
if (!self._isAlreadySelected(self, item)) {
self._addNewTag(self, item);
self._tagValuesSet(self);
... ... @@ -13240,7 +13353,6 @@ define("addtabs", function(){});
if (typeof self.option.callback === 'function') {
self.option.callback.call(self, $(current).data('dataObj'));
}
//触发指定事件
if (self.option.bind_to) {
$(self.elem.combo_input).trigger(self.option.bind_to, $(current).data('dataObj'));
... ... @@ -13251,8 +13363,8 @@ define("addtabs", function(){});
}
//$(self.elem.combo_input).focus();
$(self.elem.combo_input).change();
$(self.elem.combo_input).blur();
$(self.elem.combo_input).trigger("change");
$(self.elem.combo_input).trigger("blur");
self._setCssFocusedInput(self);
self._inputResize(self);
},
... ...
... ... @@ -67,6 +67,9 @@ define(['jquery', 'bootstrap', 'backend', 'toastr', 'upload', 'validator'], func
return false;
},
bindevent: function (form, onBeforeSubmit, onAfterSubmit) {
//移除提交按钮的disabled类
$(".layer-footer .btn.disabled", form).removeClass("disabled");
//绑定表单事件
form.validator($.extend({
validClass: 'has-success',
invalidClass: 'has-error',
... ... @@ -117,6 +120,10 @@ define(['jquery', 'bootstrap', 'backend', 'toastr', 'upload', 'validator'], func
source: 'ajax/selectpage',
});
});
//给隐藏的元素添加上validate验证触发事件
$(form).on("change", ".selectpage-input-hidden", function () {
$(this).trigger("validate");
});
}
//绑定cxselect元素事件
... ...
... ... @@ -114,6 +114,7 @@ require.config({
'css': '../libs/require-css/css.min'
}
},
waitSeconds: 30,
charset: 'utf-8' // 文件编码
});
... ...
... ... @@ -128,6 +128,7 @@ require.config({
'css': '../libs/require-css/css.min'
}
},
waitSeconds: 30,
charset: 'utf-8' // 文件编码
});
... ...
define(['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-mobile', 'bootstrap-table-export', 'bootstrap-table-commonsearch'], function ($, undefined, Backend, Toastr, Moment) {
define(['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-mobile', 'bootstrap-table-export', 'bootstrap-table-commonsearch', 'bootstrap-table-template'], function ($, undefined, Backend, Toastr, Moment) {
var Table = {
list: {},
// Bootstrap-table 基础配置
... ... @@ -141,8 +141,9 @@ define(['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table',
});
// 处理选中筛选框后按钮的状态统一变更
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$(Table.config.disabledbtn, toolbar).toggleClass('disabled', !table.bootstrapTable('getSelections').length);
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table fa.event.check', function () {
var ids = Table.api.selectedids(table);
$(Table.config.disabledbtn, toolbar).toggleClass('disabled', !ids.length);
});
// 刷新按钮事件
... ... @@ -154,7 +155,7 @@ define(['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table',
var ids = Table.api.selectedids(table);
Backend.api.open(options.extend.add_url + "/ids" + (ids.length > 0 ? '/' : '') + ids.join(","), __('Add'));
});
// 编辑按钮事件
// 批量编辑按钮事件
$(toolbar).on('click', Table.config.editbtn, function () {
var ids = Table.api.selectedids(table);
//循环弹出多个编辑框
... ... @@ -215,6 +216,27 @@ define(['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table',
placeHolderTemplate: ""
});
});
$(table).on("click", "input[data-id][name='checkbox']", function (e) {
table.trigger('fa.event.check');
});
$(table).on("click", "[data-id].btn-edit", function (e) {
e.preventDefault();
Backend.api.open(options.extend.edit_url + "/ids/" + $(this).data("id"), __('Edit'));
});
$(table).on("click", "[data-id].btn-del", function (e) {
e.preventDefault();
var id = $(this).data("id");
var that = this;
var index = Backend.api.layer.confirm(
__('Are you sure you want to delete this item?'),
{icon: 3, title: __('Warning'), shadeClose: true},
function () {
Table.api.multi("del", id, table, that);
Backend.api.layer.close(index);
}
);
});
var id = table.attr("id");
Table.list[id] = table;
... ... @@ -355,9 +377,15 @@ define(['jquery', 'bootstrap', 'backend', 'toastr', 'moment', 'bootstrap-table',
// 获取选中的条目ID集合
selectedids: function (table) {
var options = table.bootstrapTable('getOptions');
return $.map(table.bootstrapTable('getSelections'), function (row) {
return row[options.pk];
});
if (options.templateView) {
return $.map($("input[data-id][name='checkbox']:checked"), function (dom) {
return $(dom).data("id");
});
} else {
return $.map(table.bootstrapTable('getSelections'), function (row) {
return row[options.pk];
});
}
},
// 切换复选框状态
toggleattr: function (table) {
... ...
... ... @@ -100,6 +100,20 @@ body.is-dialog {
}
}
}
@media only screen and (min-width : 481px) {
.row-flex {
display: flex;
flex-wrap: wrap;
}
.row-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
.row-flex.row:after,
.row-flex.row:before {
display: flex;
}
}
.common-search-table {
min-height: 20px;
padding: 15px;
... ... @@ -110,6 +124,14 @@ body.is-dialog {
border-bottom:1px dashed @link-color;
}
table.table-template{
overflow:hidden;
}
.sp_container .msg-box{
position: absolute;
right: 0;
top: 0;
}
.toast-top-right-index{
top:62px;
right:12px;
... ...