github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

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

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

* refactor: update

* Update docs/table/detail/options.md
pull/2021/head
贤心 5 months ago committed by GitHub
parent
249d6db78e
commit
2769fd3254
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 288 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 92
      docs/table/detail/options.md
  2. 14
      docs/table/examples/demo.md
  3. 49
      examples/table-test.html
  4. 277
      src/modules/table.js

92
docs/table/detail/options.md
Unescape View File

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

14
docs/table/examples/demo.md
Unescape View File

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

49
examples/table-test.html
Unescape View File

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

277
src/modules/table.js
Unescape View File

@ -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'
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'){
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 +'">'
// 若开启 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>');
+'</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

Write Preview
Loading…
Cancel
Save