lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 08:37:29 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(table): 修复设置列宽的一些边缘情况 (#2332)

Browse Source 
* fix(table): 修复设置列宽的一些边缘情况

* chore: 重命名 getInnerWidh -> getContentWidth
This commit is contained in:
morning-star 2024-11-21 10:40:37 +08:00 committed by GitHub
parent 37a869de54
commit 3645282c22
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/modules/table.js
View File

@ -447,7 +447,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 让表格平铺
that.fullSize();
that.setColsWidth();
that.setColsWidth({isInit: true});
that.pullData(that.page); // 请求数据
that.events(); // 事件
@ -487,17 +487,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var isNone;
parent = parent || options.elem.parent();
if(!window.getComputedStyle){
// IE 中的 `currentStyle` 获取未显式设置的宽高时会得到 'auto'，jQuery 中有一些 hack 方法获取准确值
width = parent.width();
}else{
var size = that.getElementSize(parent[0]);
// IE BUG
// border-box: getComputedStyle 得到的 width/height 是按照 content-box 计算出来的
width = size.boxSizing === 'border-box' && !lay.ie
? size.width - size.paddingLeft - size.paddingRight - size.borderLeftWidth - size.borderRightWidth
: size.width
}
width = that.getContentWidth(parent);
try {
isNone = parent.css('display') === 'none';
} catch(e){}
@ -907,7 +898,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
};
// 动态分配列宽
Class.prototype.setColsWidth = function(){
Class.prototype.setColsWidth = function(opt){
var that = this;
var options = that.config;
var colNums = 0; // 列个数
@ -917,6 +908,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var cntrWidth = that.setInit('width');
var borderWidth = parseFloat(layui.getStyle(that.elem[0], 'border-left-width'));
var lastSpreadCol;
var headerTableElem = that.layHeader.first().children('table');
var mainTableElem = that.layMain.find('table');
var isEmptyTable = that.layMain.find('tbody').is(":empty");
var isInit = opt && opt.isInit;
// 统计列个数和最后一个分配宽度的列
that.eachCols(function(i, item){
@ -989,15 +984,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 记录自动列数
that.autoColNums = autoColNums = autoColNums > 0 ? autoColNums : 0;
// 如果表格内容为空（无数据 或 请求异常）
if (that.layMain.find('tbody').is(":empty")) {
// 将表格宽度设置为跟表头一样的宽度，使之可以出现底部滚动条，以便滚动查看所有字段
var headerWidth = that.layHeader.first().children('table').width()
that.layMain.find('table').width(headerWidth);
} else {
that.layMain.find('table').width('auto');
}
var pixelsForLastCol = cntrWidth;
that.eachCols(function(i3, item3){
var minWidth = item3.minWidth || options.cellMinWidth;
@ -1045,6 +1031,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var newWidth = Math.max(Math.min(pixelsForLastCol, maxWidth), minWidth);
item.style.width = newWidth + 'px';
if (!isInit && isEmptyTable){
// 将表格宽度设置为跟表头一样的宽度，使之可以出现底部滚动条，以便滚动查看所有字段
mainTableElem.width(that.getContentWidth(headerTableElem));
}
// 二次校验，如果仍然出现横向滚动条（通常是 1px 的误差导致）
// 不同屏幕分辨率、缩放水平以及浏览器渲染差异，可能会触发这个问题
if(that.layMain.prop('offsetHeight') > that.layMain.prop('clientHeight')){
@ -1053,6 +1043,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
});
}
if (!isInit && isEmptyTable) {
// 将表格宽度设置为跟表头一样的宽度，使之可以出现底部滚动条，以便滚动查看所有字段
mainTableElem.width(that.getContentWidth(headerTableElem));
} else {
mainTableElem.width('auto');
}
that.setGroupWidth();
};
@ -2847,6 +2844,26 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
marginLeft: parseFloat(style.marginLeft || '0'),
boxSizing: style.boxSizing
}
}
/**
* 获取元素 content 区域宽度值
* @param {JQuery} elem - 元素的 jQuery 对象
*/
Class.prototype.getContentWidth = function(elem){
var that = this;
if(!window.getComputedStyle){
// IE 中的 `currentStyle` 获取未显式设置的宽高时会得到 'auto'，jQuery 中有一些 hack 方法获取准确值
return elem.width();
}else{
var size = that.getElementSize(elem[0]);
// IE BUG
// border-box: getComputedStyle 得到的 width/height 是按照 content-box 计算出来的
return (size.boxSizing === 'border-box' && !lay.ie)
? size.width - size.paddingLeft - size.paddingRight - size.borderLeftWidth - size.borderRightWidth
: size.width
}
};
// 全局事件