From ed7845d826c9e2a24d85c47c27231c06d450e11a 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, 15 Aug 2023 19:55:45 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20table=20=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=A0=BC=E5=86=85=E5=AE=B9=E4=B8=8B=E6=8B=89=E5=B1=95=E5=BC=80?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/layui.css | 14 +++---- src/modules/table.js | 93 +++++++++++++++++++++++++++----------------- 2 files changed, 64 insertions(+), 43 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index ded7daa9..6743d53e 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -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;} diff --git a/src/modules/table.js b/src/modules/table.js index 8dd1def4..e597b812 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -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('
'); } }; - // 单元格内容展开 + // 展开单元格内容 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 = $(''); - that.tipsIndex = layer.tips([ - '
', - elemCell.html(), - '
', - '' - ].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); };