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

新增表格模板示例
新增表格未加载完成禁止提交
新增控制台图表动态加载的功能
修改requrejs加载超时为30秒
修复commonsearch存在多个时导致搜索框无法正常加载的BUG
优化后台微信管理中菜单管理的排版问题
优化语言包文字显示

application/admin/controller/example/Tabletemplate.php

@@ -0,0 +1,60 @@
+<?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();
+    }
+
+}

application/admin/lang/zh-cn.php

@@ -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'                                   => '操作成功!',

application/admin/lang/zh-cn/wechat/autoreply.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+    'Text'      => '文本',
+    'Event key' => '响应标识',
+    'Remark' => '备注',
+];

application/admin/lang/zh-cn/wechat/response.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'Resource title' => '资源标题',
+    'Event key'      => '事件标识',
+    'Text'           => '文本',
+    'App'            => '应用',
+];

application/admin/view/common/header.html

@@ -1,9 +1,9 @@
 <!-- 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">

application/admin/view/example/bootstraptable/index.html

@@ -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">

application/admin/view/example/tabletemplate/index.html

@@ -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 = ['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-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>

application/admin/view/general/attachment/add.html

@@ -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>
 

application/admin/view/general/config/index.html

@@ -1,3 +1,14 @@
+<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>

application/admin/view/wechat/menu/index.html

@@ -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,7 +15,8 @@
                                 </li>
                             </ul>
                         </div>
-                        <div class="weixin-content">
+                        <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">
@@ -64,6 +65,7 @@
                                 点击左侧菜单进行编辑操作
                             </div>
                         </div>
+                    </div>
                     <div class="row">
                         <div class="col-xs-4 text-center text-danger">
                             <i class="fa fa-lightbulb-o"></i> <small>可直接拖动菜单排序</small>

application/extra/site.php

@@ -28,4 +28,6 @@ return array (
     'user' => '会员配置',
     'example' => '示例分组',
   ),
+  'aaaa' => '',
+  'ffff' => 'key2',
 );

public/assets/css/backend.css

@@ -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;

public/assets/css/wechat/menu.css

@@ -1,7 +1,7 @@
 .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,6 +46,8 @@
     margin-bottom: 20px;
 }
 .mobile-menu-preview{
+    display:block;
+    float:left;
     position:relative;
     width: 317px;
     height: 550px;
@@ -48,6 +55,7 @@
     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{

public/assets/js/backend.js

@@ -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) {

public/assets/js/backend/dashboard.js

@@ -72,6 +72,35 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
 
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
+
+            //动态添加数据，可以通过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();
             });

public/assets/js/backend/example/bootstraptable.js

@@ -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');
                         //这里我们手动将数据填充到表单然后提交

public/assets/js/backend/example/tabletemplate.js

@@ -0,0 +1,126 @@
+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;
+});

public/assets/js/backend/wechat/autoreply.js

@@ -28,6 +28,7 @@ define(['jquery', 'bootstrap', 'backend', 'form', 'table'], function ($, undefin
                         {field: 'eventkey', title: __('Event key')},
                         {field: 'remark', title: __('Remark')},
                         {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}
                     ]

public/assets/js/bootstrap-table-commonsearch.js

@@ -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="submit" class="btn btn-success" >%s</button> ', 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="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 () {

public/assets/js/bootstrap-table-template.js

@@ -0,0 +1,60 @@
+!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);

public/assets/js/require-backend.js

@@ -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' // 文件编码
 });
 

public/assets/js/require-backend.min.js

@@ -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="submit" class="btn btn-success" >%s</button> ', 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="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.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table fa.event.check', function () {
-                    $(Table.config.disabledbtn, toolbar).toggleClass('disabled', !table.bootstrapTable('getSelections').length);
+                    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');
+                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;
+            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.elem.combo_input).val(text);
-                    self._setHiddenValue($(current).attr('pkey'));
+                    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).trigger("change");
-            $(self.elem.combo_input).blur();
+            $(self.elem.combo_input).trigger("blur");
             self._setCssFocusedInput(self);
             self._inputResize(self);
         },

public/assets/js/require-form.js

@@ -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元素事件

public/assets/js/require-frontend.js

@@ -114,6 +114,7 @@ require.config({
             'css': '../libs/require-css/css.min'
         }
     },
+    waitSeconds: 30,
     charset: 'utf-8' // 文件编码
 });
 

public/assets/js/require-frontend.min.js

@@ -128,6 +128,7 @@ require.config({
             'css': '../libs/require-css/css.min'
         }
     },
+    waitSeconds: 30,
     charset: 'utf-8' // 文件编码
 });
 

public/assets/js/require-table.js

@@ -1,4 +1,4 @@
-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.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table fa.event.check', function () {
-                    $(Table.config.disabledbtn, toolbar).toggleClass('disabled', !table.bootstrapTable('getSelections').length);
+                    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');
+                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) {

public/assets/less/backend.less

@@ -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;