优化 table 单元格内容下拉展开状态面板
This commit is contained in:
贤心
parent
8138893f0b
commit
ed7845d826
@ -1131,15 +1131,15 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
|
||||
|
||||
/* 展开溢出的单元格 */
|
||||
.layui-table-grid .layui-table-cell{overflow: visible;}
|
||||
.layui-table-grid-down{position: absolute; top: 0; right: 0; width: 26px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer;}
|
||||
.layui-table-grid-down .layui-icon{position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px;}
|
||||
.layui-table-grid-down{position: absolute; top: 0; right: 0; width: 24px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer;}
|
||||
.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;}
|
||||
|
||||
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-expanded{height: 95px;}
|
||||
.layui-table-expanded .layui-table-cell{height: auto; max-height: 95px; white-space: normal; text-overflow: clip;}
|
||||
.layui-table-cell-c{position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: 0.3s all; font-size: 14px;}
|
||||
.layui-table-cell-c:hover{border-color: #16b777;}
|
||||
.layui-table-expanded td:hover .layui-table-cell{overflow: auto;}
|
||||
|
||||
/** 树表 **/
|
||||
.layui-table-tree-nodeIcon {max-width: 20px;}
|
||||
|
||||
@ -136,6 +136,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var ELEM_GROUP = 'laytable-cell-group';
|
||||
var ELEM_COL_SPECIAL = 'layui-table-col-special';
|
||||
var ELEM_TOOL_PANEL = 'layui-table-tool-panel';
|
||||
var ELEM_EXPAND = 'layui-table-expanded'
|
||||
|
||||
var DATA_MOVE_NAME = 'LAY_TABLE_MOVE_DICT';
|
||||
|
||||
@ -1273,7 +1274,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}, 50);
|
||||
that.haveInit = true;
|
||||
|
||||
layer.close(that.tipsIndex);
|
||||
};
|
||||
|
||||
table.cache[that.key] = data; //记录数据
|
||||
@ -1495,13 +1495,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
};
|
||||
|
||||
// 标记当前活动行背景色
|
||||
Class.prototype.setRowActive = function(index, className){
|
||||
Class.prototype.setRowActive = function(index, className, removeClass){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var tr = that.layBody.find('tr[data-index="'+ index +'"]');
|
||||
className = className || 'layui-table-click';
|
||||
tr.addClass(className)
|
||||
.siblings('tr').removeClass(className);
|
||||
|
||||
if(removeClass) return tr.removeClass(className);
|
||||
|
||||
tr.addClass(className);
|
||||
tr.siblings('tr').removeClass(className);
|
||||
};
|
||||
|
||||
// 设置行选中状态
|
||||
@ -1659,10 +1662,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
// 获取 cssRule
|
||||
Class.prototype.getCssRule = function(key, callback){
|
||||
var that = this;
|
||||
var style = that.elem.find('style')[0];
|
||||
var style = that.elem.children('style')[0];
|
||||
var sheet = style.sheet || style.styleSheet || {};
|
||||
var rules = sheet.cssRules || sheet.rules;
|
||||
|
||||
layui.each(rules, function(i, item){
|
||||
if(item.selectorText === ('.laytable-cell-'+ key)){
|
||||
return callback(item), true;
|
||||
@ -1837,7 +1839,6 @@ 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': // 筛选列
|
||||
@ -2030,7 +2031,6 @@ 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){
|
||||
@ -2270,7 +2270,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
|
||||
}).on('click', 'tr', function(e){ // 单击行
|
||||
// 不支持行单击事件的元素
|
||||
var UNROW = '.layui-form-checkbox,.layui-form-switch,.layui-form-radio,[lay-unrow]';
|
||||
var UNROW = [
|
||||
'.layui-form-checkbox',
|
||||
'.layui-form-switch',
|
||||
'.layui-form-radio',
|
||||
'[lay-unrow]'
|
||||
].join(',');
|
||||
if( $(e.target).is(UNROW) || $(e.target).closest(UNROW)[0]){
|
||||
return;
|
||||
};
|
||||
@ -2394,7 +2399,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var othis = $(this);
|
||||
var elemCell = othis.children(ELEM_CELL);
|
||||
|
||||
if(othis.data('off')) return; //不触发事件
|
||||
if(othis.data('off')) return; // 不触发事件
|
||||
if(othis.parent().hasClass(ELEM_EXPAND)) return; // 是否已为展开状态
|
||||
|
||||
if(hide){
|
||||
othis.find('.layui-table-grid-down').remove();
|
||||
@ -2406,39 +2412,54 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');
|
||||
}
|
||||
};
|
||||
// 单元格内容展开
|
||||
// 展开单元格内容
|
||||
var gridExpand = function(e){
|
||||
var othis = $(this);
|
||||
var td = othis.parent();
|
||||
var key = td.data('key');
|
||||
var col = that.col(key);
|
||||
var index = td.parent().data('index');
|
||||
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 +'">');
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
// 恢复其他已经展开的单元格
|
||||
that.elem.find('.'+ ELEM_CELL_C).trigger('click');
|
||||
|
||||
// 设置当前单元格展开宽度
|
||||
that.getCssRule(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';
|
||||
|
||||
that.scrollPatch(); // 滚动条补丁
|
||||
});
|
||||
|
||||
// 设置当前单元格展开样式
|
||||
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.getCssRule(key, function(item){
|
||||
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
|
||||
that.resize(); // 滚动条补丁
|
||||
});
|
||||
$this.remove();
|
||||
});
|
||||
|
||||
othis.remove();
|
||||
layui.stope(e);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user