From 2769fd32540b3c000eb9a1aa9ef3922e1afb2bb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Tue, 18 Jun 2024 11:48:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor(table):=20=E9=87=8D=E6=9E=84=20default?= =?UTF-8?q?Toolbar=20=E9=80=89=E9=A1=B9=20(#2019)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * test(table): 新增自定义导出示例 * refactor(table): 重构 `defaultToolbar` 选项，增加 `name,onClick` 成员 * refactor: update * Update docs/table/detail/options.md --- docs/table/detail/options.md | 92 ++++++++++-- docs/table/examples/demo.md | 14 +- examples/table-test.html | 49 ++++++- src/modules/table.js | 277 ++++++++++++++++++++--------------- 4 files changed, 288 insertions(+), 144 deletions(-) diff --git a/docs/table/detail/options.md b/docs/table/detail/options.md index 8cb3bd5c..e8bc722c 100644 --- a/docs/table/detail/options.md +++ b/docs/table/detail/options.md @@ -92,14 +92,89 @@ -defaultToolbar -设置头部工具栏右侧图标。值是一个数组，可选成员有: `filter,exports,print` （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：`defaultToolbar: ['filter','print','exports']`
支持自定义图标及事件，用法详见示例: [#综合演示](#examples) +[defaultToolbar](#options.defaultToolbar) + + + + +
+ 设置头部工具栏右上角工具图标，值为一个数组，图标将根据数组值的顺序排列。 +
+ +**默认内置工具**： + +```js +defaultToolbar: [ + 'filter', // 列筛选 + 'exports', // 导出 + 'print' // 打印 +] +``` + +**重写内置工具** 2.9.12+，以自定义导出为例： + +
+ + +```js +defaultToolbar: [ + 'filter', + { + name: 'exports', + onClick: function(obj) { + // 获得数据并清除临时字段 + var data = table.clearCacheKey(obj.data); + // 当前示例配置项 + var options = obj.config; + + // 弹出面板 + obj.openPanel({ + list: [ // 列表 + '
  • 导出 CSV 文件
    • ', + '
  • 导出 XLSX 文件
    • ' + ].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' +] +``` + +
    + +**扩展工具图标**： + +```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); // 查看返回的对象成员 + } + } +] +``` -array -- width @@ -113,7 +188,7 @@ [height](#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 类型 } ``` -number
    string -- maxHeight 2.8+ diff --git a/docs/table/examples/demo.md b/docs/table/examples/demo.md index 0de8b3a6..c7277b9f 100644 --- a/docs/table/examples/demo.md +++ b/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; }; }); diff --git a/examples/table-test.html b/examples/table-test.html index e4daecf6..4a35dc04 100644 --- a/examples/table-test.html +++ b/examples/table-test.html @@ -153,11 +153,47 @@ layui.use(['table', 'dropdown'], function(){ }, limit: 30, toolbar: '#toolbarDemo', - defaultToolbar: ['filter', 'exports', 'print', { - title: '帮助', - layEvent: 'LAYTABLE_TIPS', - icon: 'layui-icon-tips' - }], + defaultToolbar: [ + 'filter', + { + // 自定义导出 --- 2.9.12+ + name: 'exports', + onClick: function(obj) { + var data = table.clearCacheKey(obj.data); // 清除临时字段 + var options = obj.config; + + // 弹出面板 + obj.openPanel({ + list: [ + '
  • 导出 CSV 文件
    • ', + '
  • 导出 XLSX 文件
    • ' + ].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; }; }); diff --git a/src/modules/table.js b/src/modules/table.js index b7d101f1..a912e781 100644 --- a/src/modules/table.js +++ b/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 options = that.config + var that = this; + 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('
    • '); + } + }); + 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 [ + '
  • 导出 CSV 文件
    • ' + ].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 = [''].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'){ - layui.each(options.defaultToolbar, function(i, item){ - var thisItem = typeof item === 'string' ? layout[item] : item; - if(thisItem){ - iconElem.push('
    ' + // 若开启 defaultToolbar + if (typeof options.defaultToolbar === 'object') { + var iconElem = []; + options.defaultToolbar = $.map(options.defaultToolbar, function(item, i) { + 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( + '
    ' +'' - +'
    '); + +'
    ' + ); } + 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 = $(''); @@ -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': // 筛选列 - openPanel({ - list: function(){ - var lis = []; - that.eachCols(function(i, item){ - if(item.field && item.type == 'normal'){ - lis.push('
    • '); - } - }); - 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 - }); - }); - } + // 头部工具栏右侧图标 + layui.each(options.defaultToolbar, function(index, item) { + if (item.layEvent === events) { + typeof item.onClick === 'function' && item.onClick({ + data: data, + config: options, + openPanel: openPanel }); - break; - 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 [ - '
  • 导出 csv 格式文件
    • ', - '
  • 导出 xls 格式文件
    • ' - ].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 = [''].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; - } + return true; + } + }); + // table toolbar 事件 layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({ event: events, config: options