refactor(table): 重构 defaultToolbar 选项 (#2019)

* test(table): 新增自定义导出示例

* refactor(table): 重构 `defaultToolbar` 选项，增加 `name,onClick` 成员

* refactor: update

* Update docs/table/detail/options.md

docs/table/detail/options.md

@@ -92,14 +92,89 @@
 </td>
     </tr>
     <tr>
-<td>defaultToolbar</td>
 <td>
 
-设置头部工具栏右侧图标。值是一个数组，可选成员有: `filter,exports,print` （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：`defaultToolbar: ['filter','print','exports']` <br>支持自定义图标及事件，用法详见示例: [#综合演示](#examples)
+[defaultToolbar](#options.defaultToolbar)
+
+</td>
+<td colspan="3">
+
+<div class="ws-anchor" id="options.defaultToolbar">
+  设置头部工具栏右上角工具图标，值为一个数组，图标将根据数组值的顺序排列。
+</div>
+
+**默认内置工具**：
+
+```js
+defaultToolbar: [
+  'filter', // 列筛选
+  'exports', // 导出
+  'print' // 打印
+]
+```
+
+**重写内置工具** <sup>2.9.12+</sup>，以自定义导出为例：
+
+<div id="options-defaultToolbar-rewrite">
+  <style>#options-defaultToolbar-rewrite .layui-code-wrap{max-height: 280px;}</style>
+
+```js
+defaultToolbar: [
+  'filter',
+  {
+    name: 'exports',
+    onClick: function(obj) {
+      // 获得数据并清除临时字段
+      var data = table.clearCacheKey(obj.data);
+      // 当前示例配置项
+      var options = obj.config;
+
+      // 弹出面板
+      obj.openPanel({
+        list: [ // 列表
+          '<li data-type="csv">导出 CSV 文件</li>',
+          '<li data-type="xlsx">导出 XLSX 文件</li>'
+        ].join(''),
+        done: function(panel, list) { // 操作列表
+          list.on('click', function() {
+            var type = $(this).data('type')
+            if (type === 'csv') {
+               // 调用内置导出方法
+              table.exportFile(options.id, null, type);
+            } else if(type === 'xlsx') {
+              // 自助处理导出 - 如借助 sheetjs 库或服务端导出
+              // …
+            }
+          });
+        }
+      });
+    }
+  },
+  'print'
+]
+```
+
+</div>
+
+**扩展工具图标**：
+
+```js
+defaultToolbar: [
+  'filter', 'exports', 'print', // 内置工具
+  {
+    // 扩展工具
+    title: '提示', // 标题
+    name: 'tips', // name
+    layEvent: 'LAYTABLE_TIPS', // 事件标识
+    icon: 'layui-icon-tips', // 图标 className
+    onClick: function(obj) { // 点击事件 - 2.9.12+
+      console.log(obj); // 查看返回的对象成员
+    }
+  }
+]
+```
 
 </td>
-<td>array</td>
-<td>-</td>
     </tr>
     <tr>
 <td>width</td>
@@ -113,7 +188,7 @@
 [height](#options.height)
 
 </td>
-<td>
+<td colspan="3">
 
 <div class="ws-anchor" id="options.height">
   设置表格容器高度，默认自适应。其他可选值的规则如下：
@@ -127,16 +202,15 @@
 
 当需要动态改变表格高度时建议使用，如下以等效 `full-xx` 的写法为例：
 
-```
+```js
 height: function(){
-  var otherHeight = $('#search-content').outerHeight(); // 自定义其他区域的高度
+   // 自定义其他区域的高度
+  var otherHeight = $('#search-content').outerHeight();
   return $(window).height() - otherHeight; // 返回 number 类型
 }
 ```
 
 </td>
-<td>number<br>string</td>
-<td>-</td>
     </tr>
     <tr>
 <td>maxHeight <sup>2.8+</sup></td>

docs/table/examples/demo.md

@@ -57,10 +57,13 @@ layui.use(['table', 'dropdown'], function(){
     elem: '#test',
     url: '/static/json/2/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
     toolbar: '#toolbarDemo',
-    defaultToolbar: ['filter', 'exports', 'print', {
+    defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
       title: '提示',
       layEvent: 'LAYTABLE_TIPS',
-      icon: 'layui-icon-tips'
+      icon: 'layui-icon-tips',
+      onClick: function(obj) { // 2.9.12+
+        layer.alert('自定义工具栏图标按钮');
+      }
     }],
     height: 'full-35', // 最大高度减去其他容器已占有的高度差
     css: [ // 重设当前表格样式
@@ -259,15 +262,12 @@ layui.use(['table', 'dropdown'], function(){
       case 'getCheckData':
         var data = checkStatus.data;
         layer.alert(layui.util.escape(JSON.stringify(data)));
-      break;
+        break;
       case 'getData':
         var getData = table.getData(id);
         console.log(getData);
         layer.alert(layui.util.escape(JSON.stringify(getData)));
-      break;
+        break;
-      case 'LAYTABLE_TIPS':
-        layer.alert('自定义工具栏图标按钮');
-      break;
     };
   });
 

examples/table-test.html

@@ -153,11 +153,47 @@ layui.use(['table', 'dropdown'], function(){
     },
     limit: 30,
     toolbar: '#toolbarDemo',
-    defaultToolbar: ['filter', 'exports', 'print', {
+    defaultToolbar: [
-      title: '帮助',
+      'filter',
-      layEvent: 'LAYTABLE_TIPS',
+      {
-      icon: 'layui-icon-tips'
+        // 自定义导出 --- 2.9.12+
-    }],
+        name: 'exports',
+        onClick: function(obj) {
+          var data = table.clearCacheKey(obj.data); // 清除临时字段
+          var options = obj.config;
+
+          // 弹出面板
+          obj.openPanel({
+            list: [
+              '<li data-type="csv">导出 CSV 文件</li>',
+              '<li data-type="xlsx">导出 XLSX 文件</li>'
+            ].join(''),
+            done: function(panel, list) {
+              list.on('click', function(){
+                var type = $(this).data('type')
+                if (type === 'csv') {
+                  table.exportFile(options.id, null, type); // 调用内置导出方法
+                } else if(type === 'xlsx') {
+                  // 自助处理导出 - 如借助 sheetjs 库或服务端导出
+                  // …
+                  layer.msg('自助处理导出 xlsx');
+                }
+
+              });
+            }
+          });
+        }
+      },
+      'print',
+      {
+        title: '帮助',
+        layEvent: 'LAYTABLE_TIPS',
+        icon: 'layui-icon-tips',
+        onClick: function(obj) {
+          layer.alert('Table for layui-v'+ layui.v);
+        }
+      }
+    ],
     // escape: false,
     editTrigger: 'dblclick',
     // cellMaxWidth: 320
@@ -470,9 +506,6 @@ layui.use(['table', 'dropdown'], function(){
         });
         layer.msg('已设为单行');
         break;
-      case 'LAYTABLE_TIPS':
-        layer.alert('Table for layui-v'+ layui.v);
-        break;
     };
   });
 

src/modules/table.js

@@ -620,10 +620,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     });
   };
 
-  // 初始工具栏
+  // 初始头部工具栏
   Class.prototype.renderToolbar = function(){
-    var that = this
+    var that = this;
-    var options = that.config
+    var options = that.config;
+    var filter = options.elem.attr('lay-filter');
 
     // 添加工具栏左侧模板
     var leftDefaultTemp = [
@@ -642,36 +643,162 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       );
     }
 
-    // 添加工具栏右侧面板
+    // 头部工具栏右上角默认工具
-    var layout = {
+    var defaultConfig = {
       filter: {
         title: '筛选列',
         layEvent: 'LAYTABLE_COLS',
-        icon: 'layui-icon-cols'
+        icon: 'layui-icon-cols',
+        onClick: function(obj) {
+          var options = obj.config;
+          var openPanel = obj.openPanel;
+
+          openPanel({
+            list: function(){
+              var lis = [];
+              that.eachCols(function(i, item){
+                if(item.field && item.type == 'normal'){
+                  lis.push('<li><input type="checkbox" name="'+ item.field +'" data-key="'+ item.key +'" data-parentkey="'+ (item.parentKey||'') +'" lay-skin="primary" '+ (item.hide ? '' : 'checked') +' title="'+ util.escape($('<div>' + (item.fieldTitle || item.title || item.field) + '</div>').text()) +'" lay-filter="LAY_TABLE_TOOL_COLS"></li>');
+                }
+              });
+              return lis.join('');
+            }(),
+            done: function() {
+              form.on('checkbox(LAY_TABLE_TOOL_COLS)', function(obj){
+                var othis = $(obj.elem);
+                var checked = this.checked;
+                var key = othis.data('key');
+                var col = that.col(key);
+                var hide = col.hide;
+                var parentKey = othis.data('parentkey');
+
+                if(!col.key) return;
+
+                // 同步勾选列的 hide 值和隐藏样式
+                col.hide = !checked;
+                that.elem.find('*[data-key="'+ key +'"]')[
+                  checked ? 'removeClass' : 'addClass'
+                ](HIDE);
+
+                // 根据列的显示隐藏，同步多级表头的父级相关属性值
+                if(hide != col.hide){
+                  that.setParentCol(!checked, parentKey);
+                }
+
+                // 重新适配尺寸
+                that.resize();
+
+                // 列筛选（显示或隐藏）后的事件
+                layui.event.call(this, MOD_NAME, 'colToggled('+ filter +')', {
+                  col: col,
+                  config: options
+                });
+              });
+            }
+          });
+        }
       },
       exports: {
         title: '导出',
         layEvent: 'LAYTABLE_EXPORT',
-        icon: 'layui-icon-export'
+        icon: 'layui-icon-export',
+        onClick: function(obj) { // 自带导出
+          var data = obj.data;
+          var options = obj.config;
+          var openPanel = obj.openPanel;
+
+          if (!data.length) return layer.tips('当前表格无数据', this, {tips: 3});
+          if(device.ie){
+            layer.tips('导出功能不支持 IE，请用 Chrome 等高级浏览器导出', this, {
+              tips: 3
+            });
+          } else {
+            openPanel({
+              list: function(){
+                return [
+                  '<li data-type="csv">导出 CSV 文件</li>'
+                ].join('')
+              }(),
+              done: function(panel, list){
+                list.on('click', function(){
+                  var type = $(this).data('type')
+                  table.exportFile.call(that, options.id, null, type);
+                });
+              }
+            });
+          }
+        }
       },
       print: {
         title: '打印',
         layEvent: 'LAYTABLE_PRINT',
-        icon: 'layui-icon-print'
+        icon: 'layui-icon-print',
+        onClick: function(obj) {
+          var data = obj.data;
+          var options = obj.config;
+
+          if (!data.length) return layer.tips('当前表格无数据', this, {tips: 3});
+          var printWin = window.open('about:blank', '_blank');
+          var style = ['<style>',
+            'body{font-size: 12px; color: #5F5F5F;}',
+            'table{width: 100%; border-collapse: collapse; border-spacing: 0;}',
+            'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #5F5F5F;}',
+            'a{color: #5F5F5F; text-decoration:none;}',
+            'img{max-height: 100%;}',
+            '*.layui-hide{display: none}',
+          '</style>'].join('')
+          var html = $(that.layHeader.html()); // 输出表头
+
+          html.append(that.layMain.find('table').html()); // 输出表体
+          html.append(that.layTotal.find('table').html()) // 输出合计行
+
+          html.find('th.layui-table-patch').remove(); // 移除补丁
+          // 移除表头特殊列
+          html.find('thead>tr>th.'+ ELEM_COL_SPECIAL).filter(function(i, thElem){
+            return !$(thElem).children('.'+ ELEM_GROUP).length; // 父级表头除外
+          }).remove();
+          html.find('tbody>tr>td.'+ ELEM_COL_SPECIAL).remove(); // 移除表体特殊列
+
+          printWin.document.write(style + html.prop('outerHTML'));
+          printWin.document.close();
+
+          if(layui.device('edg').edg){
+            printWin.onafterprint = printWin.close;
+            printWin.print();
+          }else{
+            printWin.print();
+            printWin.close();
+          }
+        }
       }
-    }, iconElem = [];
+    };
 
-    if(typeof options.defaultToolbar === 'object'){
+    // 若开启 defaultToolbar
-      layui.each(options.defaultToolbar, function(i, item){
+    if (typeof options.defaultToolbar === 'object') {
-        var thisItem = typeof item === 'string' ? layout[item] : item;
+      var iconElem = [];
-        if(thisItem){
+      options.defaultToolbar = $.map(options.defaultToolbar, function(item, i) {
-          iconElem.push('<div class="layui-inline" title="'+ thisItem.title +'" lay-event="'+ thisItem.layEvent +'">'
+        var itemIsName = typeof item === 'string';
+        var thisItem = itemIsName ? defaultConfig[item] : item;
+        if (thisItem) {
+          // 根据 name 匹配默认工具并合并
+          if (thisItem.name && defaultConfig[thisItem.name]) {
+            thisItem = $.extend({}, defaultConfig[thisItem.name], thisItem);
+          }
+          // 初始化默认工具 name
+          if (!thisItem.name && itemIsName) {
+            thisItem.name = item;
+          }
+          // 图标列表
+          iconElem.push(
+            '<div class="layui-inline" title="'+ thisItem.title +'" lay-event="'+ thisItem.layEvent +'">'
             +'<i class="layui-icon '+ thisItem.icon +'"></i>'
-          +'</div>');
+            +'</div>'
+          );
         }
+        return thisItem;
       });
+      that.layTool.find('.layui-table-tool-self').html(iconElem.join(''));
     }
-    that.layTool.find('.layui-table-tool-self').html(iconElem.join(''));
   };
 
   // 分页栏
@@ -2028,7 +2155,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       var othis = $(this);
       var events = othis.attr('lay-event');
       var data = table.cache[options.id];
-      var openPanel = function(sets){
+
+      // 弹出工具下拉面板
+      var openPanel = function(sets) {
         var list = $(sets.list);
         var panel = $('<ul class="' + ELEM_TOOL_PANEL + '"></ul>');
 
@@ -2054,111 +2183,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       _DOC.trigger('table.tool.panel.remove');
       layer.close(that.tipsIndex);
 
-      switch(events){
+      // 头部工具栏右侧图标
-        case 'LAYTABLE_COLS': // 筛选列
+      layui.each(options.defaultToolbar, function(index, item) {
-          openPanel({
+        if (item.layEvent === events) {
-            list: function(){
+          typeof item.onClick === 'function' && item.onClick({
-              var lis = [];
+            data: data,
-              that.eachCols(function(i, item){
+            config: options,
-                if(item.field && item.type == 'normal'){
+            openPanel: openPanel
-                  lis.push('<li><input type="checkbox" name="'+ item.field +'" data-key="'+ item.key +'" data-parentkey="'+ (item.parentKey||'') +'" lay-skin="primary" '+ (item.hide ? '' : 'checked') +' title="'+ util.escape($('<div>' + (item.fieldTitle || item.title || item.field) + '</div>').text()) +'" lay-filter="LAY_TABLE_TOOL_COLS"></li>');
-                }
-              });
-              return lis.join('');
-            }()
-            ,done: function(){
-              form.on('checkbox(LAY_TABLE_TOOL_COLS)', function(obj){
-                var othis = $(obj.elem);
-                var checked = this.checked;
-                var key = othis.data('key');
-                var col = that.col(key);
-                var hide = col.hide;
-                var parentKey = othis.data('parentkey');
-
-                if(!col.key) return;
-
-                // 同步勾选列的 hide 值和隐藏样式
-                col.hide = !checked;
-                that.elem.find('*[data-key="'+ key +'"]')[
-                  checked ? 'removeClass' : 'addClass'
-                ](HIDE);
-
-                // 根据列的显示隐藏，同步多级表头的父级相关属性值
-                if(hide != col.hide){
-                  that.setParentCol(!checked, parentKey);
-                }
-
-                // 重新适配尺寸
-                that.resize();
-
-                // 列筛选（显示或隐藏）后的事件
-                layui.event.call(this, MOD_NAME, 'colToggled('+ filter +')', {
-                  col: col,
-                  config: options
-                });
-              });
-            }
           });
-        break;
+          return true;
-        case 'LAYTABLE_EXPORT': // 导出
+        }
-          if (!data.length) return layer.tips('当前表格无数据', this, {tips: 3});
+      });
-          if(device.ie){
-            layer.tips('导出功能不支持 IE，请用 Chrome 等高级浏览器导出', this, {
-              tips: 3
-            });
-          } else {
-            openPanel({
-              list: function(){
-                return [
-                  '<li data-type="csv">导出 csv 格式文件</li>',
-                  '<li data-type="xls">导出 xls 格式文件</li>'
-                ].join('')
-              }(),
-              done: function(panel, list){
-                list.on('click', function(){
-                  var type = $(this).data('type')
-                  table.exportFile.call(that, options.id, null, type);
-                });
-              }
-            });
-          }
-        break;
-        case 'LAYTABLE_PRINT': // 打印
-          if (!data.length) return layer.tips('当前表格无数据', this, {tips: 3});
-          var printWin = window.open('about:blank', '_blank');
-          var style = ['<style>',
-            'body{font-size: 12px; color: #5F5F5F;}',
-            'table{width: 100%; border-collapse: collapse; border-spacing: 0;}',
-            'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #5F5F5F;}',
-            'a{color: #5F5F5F; text-decoration:none;}',
-            'img{max-height: 100%;}',
-            '*.layui-hide{display: none}',
-          '</style>'].join('')
-          var html = $(that.layHeader.html()); // 输出表头
-
-          html.append(that.layMain.find('table').html()); // 输出表体
-          html.append(that.layTotal.find('table').html()) // 输出合计行
-
-          html.find('th.layui-table-patch').remove(); // 移除补丁
-          // 移除表头特殊列
-          html.find('thead>tr>th.'+ ELEM_COL_SPECIAL).filter(function(i, thElem){
-            return !$(thElem).children('.'+ ELEM_GROUP).length; // 父级表头除外
-          }).remove();
-          html.find('tbody>tr>td.'+ ELEM_COL_SPECIAL).remove(); // 移除表体特殊列
-
-          printWin.document.write(style + html.prop('outerHTML'));
-          printWin.document.close();
-
-          if(layui.device('edg').edg){
-            printWin.onafterprint = printWin.close;
-            printWin.print();
-          }else{
-            printWin.print();
-            printWin.close();
-          }
-        break;
-      }
 
+      // table toolbar 事件
       layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({
         event: events,
         config: options