refactor(table): 重构 defaultToolbar 选项 (#2019)
* test(table): 新增自定义导出示例 * refactor(table): 重构 `defaultToolbar` 选项，增加 `name,onClick` 成员 * refactor: update * Update docs/table/detail/options.md
This commit is contained in:
贤心
GitHub
parent
249d6db78e
commit
2769fd3254
@ -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>
|
||||
|
||||
@ -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;
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -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: [
|
||||
'<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;
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -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('<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'
|
||||
}
|
||||
}, iconElem = [];
|
||||
icon: 'layui-icon-print',
|
||||
onClick: function(obj) {
|
||||
var data = obj.data;
|
||||
var options = obj.config;
|
||||
|
||||
if(typeof options.defaultToolbar === 'object'){
|
||||
layui.each(options.defaultToolbar, function(i, item){
|
||||
var thisItem = typeof item === 'string' ? layout[item] : item;
|
||||
if(thisItem){
|
||||
iconElem.push('<div class="layui-inline" title="'+ thisItem.title +'" lay-event="'+ thisItem.layEvent +'">'
|
||||
+'<i class="layui-icon '+ thisItem.icon +'"></i>'
|
||||
+'</div>');
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 若开启 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(
|
||||
'<div class="layui-inline" title="'+ thisItem.title +'" lay-event="'+ thisItem.layEvent +'">'
|
||||
+'<i class="layui-icon '+ thisItem.icon +'"></i>'
|
||||
+'</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': // 筛选列
|
||||
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
|
||||
});
|
||||
});
|
||||
}
|
||||
// 头部工具栏右侧图标
|
||||
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 [
|
||||
'<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;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// table toolbar 事件
|
||||
layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({
|
||||
event: events,
|
||||
config: options
|
||||
|
||||
Loading…
Reference in New Issue
Block a user