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;
-      case 'LAYTABLE_TIPS':
-        layer.alert('自定义工具栏图标按钮');
-      break;
+        break;
     };
   });