优化 table 合计行内数据超过单元格长度时,无法查看全部的问题

pull/1253/head
贤心 2023-05-14 20:44:53 +08:00
parent 26063fbaf4
commit 8e42ed08da
1 changed files with 42 additions and 25 deletions

View File

@ -2316,20 +2316,29 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
$(this).remove(); // 移除编辑状态
});
// 单元格触发编辑的事件
// 表格主体单元格触发编辑的事件
that.layBody.on(options.editTrigger, 'td', function(e){
renderGridEdit(this, e)
}).on('mouseenter', 'td', function(){
gridExpand.call(this)
showGridExpandIcon.call(this)
}).on('mouseleave', 'td', function(){
gridExpand.call(this, 'hide');
showGridExpandIcon.call(this, 'hide');
});
//单元格展开图标
var ELEM_GRID = 'layui-table-grid', ELEM_GRID_DOWN = 'layui-table-grid-down', ELEM_GRID_PANEL = 'layui-table-grid-panel'
,gridExpand = function(hide){
var othis = $(this)
,elemCell = othis.children(ELEM_CELL);
// 表格合计栏单元格 hover 显示展开图标
that.layTotal.on('mouseenter', 'td', function(){
showGridExpandIcon.call(this)
}).on('mouseleave', 'td', function(){
showGridExpandIcon.call(this, 'hide');
});
// 显示单元格展开图标
var ELEM_GRID = 'layui-table-grid';
var ELEM_GRID_DOWN = 'layui-table-grid-down';
var ELEM_GRID_PANEL = 'layui-table-grid-panel';
var showGridExpandIcon = function(hide){
var othis = $(this);
var elemCell = othis.children(ELEM_CELL);
if(othis.data('off')) return; //不触发事件
@ -2343,12 +2352,11 @@ 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>');
}
};
//单元格展开事件
that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
var othis = $(this)
,td = othis.parent()
,elemCell = td.children(ELEM_CELL);
// 单元格内容展开
var gridExpand = function(e){
var othis = $(this);
var td = othis.parent();
var elemCell = td.children(ELEM_CELL);
that.tipsIndex = layer.tips([
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 23) +'px;'+ function(){
@ -2359,18 +2367,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
return 'padding: 14px 15px;';
}
return '';
}() +'">'
,elemCell.html()
,'</div>'
,'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'
}() +'">',
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){
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);
});
@ -2378,6 +2386,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
});
layui.stope(e);
};
// 表格主体单元格展开事件
that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
gridExpand.call(this, e);
});
// 表格合计栏单元格展开事件
that.layTotal.on('click', '.'+ ELEM_GRID_DOWN, function(e){
gridExpand.call(this, e);
});
// 行工具条操作事件