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

新增 table 的 `cellExpandedMode` 基础属性，用于设置所有单元格默认展开方式 

新增 table 的 `cellExpandedWidth` 基础属性，用于设置所有单元格默认展开后的宽度
新增 table 的 `expandedMode` 表头属性，用于设置当前表头单元格展开方式，优先级高于 `cellExpandedMode`
pull/1368/head
贤心 2023-09-10 20:22:50 +08:00
parent a1f5069f83
commit 8bd84158f5
2 changed files with 76 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css/layui.css
View File

@ -1157,6 +1157,7 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-grid-down .layui-icon{position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; font-size: 14px;}
.layui-table-grid-down:hover{background-color: #fbfbfb;}
/* 单元格多行展开风格 */
.layui-table-expanded{height: 95px;}
.layui-table-expanded .layui-table-cell,
.layui-table-view .layui-table[lay-size="sm"] .layui-table-expanded .layui-table-cell,
@ -1165,6 +1166,14 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-cell-c:hover{border-color: #16b777;}
.layui-table-expanded td:hover .layui-table-cell{overflow: auto;}
/* 单元格 TIPS 展开风格 */
body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);}
.layui-table-tips-main{margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;}
.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5F5F5F; border-radius: 50%; color: #fff;}
.layui-table-tips-c:hover{background-color: #777;}
.layui-table-tips-c:before{position: relative; right: -2px;}
/** 树表 **/
.layui-table-tree-nodeIcon {max-width: 20px;}
.layui-table-tree-nodeIcon > * {width: 100%;}

102
src/modules/table.js
View File

@ -1310,6 +1310,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}, 50);
that.haveInit = true;
layer.close(that.tipsIndex);
};
table.cache[that.key] = data; //记录数据
@ -1875,6 +1876,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
layui.stope(e);
_DOC.trigger('table.tool.panel.remove');
layer.close(that.tipsIndex);
switch(events){
case 'LAYTABLE_COLS': // 筛选列
@ -2069,6 +2071,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
dict.rule.style.width = setWidth + 'px';
thatTable.setGroupWidth(thisTable.eventMoveElem);
layer.close(that.tipsIndex);
}
}
}).on('mouseup', function(e){
@ -2460,44 +2463,75 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var elemCell = td.children(ELEM_CELL);
var ELEM_CELL_C = 'layui-table-cell-c';
var elemCellClose = $('<i class="layui-icon layui-icon-up '+ ELEM_CELL_C +'">');
var expandedMode = col.expandedMode || options.cellExpandedMode;
// 恢复其他已经展开的单元格
that.elem.find('.'+ ELEM_CELL_C).trigger('click');
// 设置当前单元格展开宽度
that.cssRules(key, function(item){
var width = item.style.width;
var expandedWidth = col.expandedWidth || (that.elem.width() / 3);
// 展开后的宽度不能小于当前宽度
if(expandedWidth < parseFloat(width)) expandedWidth = parseFloat(width);
elemCellClose.data('cell-width', width);
item.style.width = expandedWidth + 'px';
setTimeout(function(){
that.scrollPatch(); // 滚动条补丁
// 展开风格
if (expandedMode === 'tips') { // TIPS 展开风格
that.tipsIndex = layer.tips([
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 23) +'px;'+ function(){
if(options.size === 'sm'){
return 'padding: 4px 15px; font-size: 12px;';
}
if(options.size === 'lg'){
return 'padding: 14px 15px;';
}
return '';
}() +'">',
elemCell.html(),
'</div>',
'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'
].join(''), elemCell[0], {
tips: [3, ''],
time: -1,
anim: -1,
maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2,
isOutAnim: false,
skin: 'layui-table-tips',
success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
}
});
});
} else { // 多行展开风格
// 恢复其他已经展开的单元格
that.elem.find('.'+ ELEM_CELL_C).trigger('click');
// 设置当前单元格展开样式
that.setRowActive(index, ELEM_EXPAND);
// 插入关闭按钮
if(!elemCell.next('.'+ ELEM_CELL_C)[0]){
elemCell.after(elemCellClose);
}
// 关闭展开状态
elemCellClose.on('click', function(){
var $this = $(this);
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
// 设置当前单元格展开宽度
that.cssRules(key, function(item){
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
that.resize(); // 滚动条补丁
var width = item.style.width;
var expandedWidth = col.expandedWidth || options.cellExpandedWidth;
// 展开后的宽度不能小于当前宽度
if(expandedWidth < parseFloat(width)) expandedWidth = parseFloat(width);
elemCellClose.data('cell-width', width);
item.style.width = expandedWidth + 'px';
setTimeout(function(){
that.scrollPatch(); // 滚动条补丁
});
});
$this.remove();
});
// 设置当前单元格展开样式
that.setRowActive(index, ELEM_EXPAND);
// 插入关闭按钮
if(!elemCell.next('.'+ ELEM_CELL_C)[0]){
elemCell.after(elemCellClose);
}
// 关闭展开状态
elemCellClose.on('click', function(){
var $this = $(this);
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
that.cssRules(key, function(item){
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
that.resize(); // 滚动条补丁
});
$this.remove();
});
}
othis.remove();
layui.stope(e);
@ -2981,5 +3015,3 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
exports(MOD_NAME, table);
});