优化 table 列宽自适应

This commit is contained in:
sentsin
2017-11-19 07:47:16 +08:00
parent 74d08a6149
commit 33e7e9ac23
6 changed files with 36 additions and 33 deletions

View File

@@ -287,7 +287,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-colla-item,
.layui-colla-content{border-top-width: 1px; border-top-style: solid;}
.layui-colla-item:first-child{border-top: none;}
.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #f2f2f2; cursor: pointer;}
.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #f2f2f2; cursor: pointer; font-size: 14px;}
.layui-colla-content{display: none; padding: 10px 15px; line-height: 22px; color: #666;}
.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}

View File

@@ -530,8 +530,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form'], function(exports){
if(item3.type === 'checkbox'){
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
var checkName = table.config.checkName;
//如果是全选
if(item3[checkName]){
tplData[checkName] = item3[checkName];
item1[checkName] = item3[checkName];
return item3[checkName] ? 'checked' : '';
}
return tplData[checkName] ? 'checked' : '';
@@ -818,17 +819,20 @@ layui.define(['laytpl', 'laypage', 'layer', 'form'], function(exports){
,scollHeight = that.layMain.height() - that.layMain.prop('clientHeight') //横向滚动条高度
,getScrollWidth = that.getScrollWidth(that.layMain[0]) //获取主容器滚动条宽度,如果有的话
,outWidth = layMainTable.outerWidth() - that.layMain.width(); //表格内容器的超出宽度
//如果存在自动列宽,则要保证绝对填充满,并且不能出现滚动条
if(that.autoColNums && !that.scrollPatchWStatus){
//如果存在自动列宽,则要保证绝对填充满,并且不能出现横向滚动条
if(that.autoColNums && outWidth < 5 && !that.scrollPatchWStatus){
var th = that.layHeader.eq(0).find('thead th:last-child')
,field = th.data('field');
that.getCssRule(field, function(item){
var width = item.style.width || th.outerWidth();
item.style.width = (parseFloat(width) - getScrollWidth - function(){
if(outWidth < 0) return outWidth;
if(outWidth < 5) return outWidth;
}()) + 'px';
item.style.width = (parseFloat(width) - getScrollWidth - outWidth) + 'px';
//二次校验,如果仍然出现横向滚动条
if(that.layMain.height() - that.layMain.prop('clientHeight') > 0){
item.style.width = parseFloat(item.style.width) - 1 + 'px';
}
that.scrollPatchWStatus = true;
});
}