
问题:表格内容增加了自动换行功能,当行高发生改变时发现右侧固定列行高不匹配。
原因:layui用定位把固定列定位在了右边,这样就会产生一个新的table,在继承高度的时候发生了错乱
解决思路:当拖动列宽的时候循环中间的表格所有tr的高度给右边表格tr依次赋值
这里我写了一个鼠标按下和释放的方法来监听拖动
// 该方法用于解决固定列行高错位问题
var x,y;
$(document).mousedown(function(event){ //获取鼠标按下的位置
x = event.pageX;
y = event.pageY;
});
$(document).mouseup(function(event){//鼠标释放
var newX = event.pageX;
var newY = event.pageY;
if(x==newX && y==newY){
//位置相同的操作
}
else{
//表格内容高度重渲染
//我这里只有右边有 固定列 左边是没有的,如果左右都有请自己查看元素 使用eq()选择器选择
//正确的 tr数组
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
//表头高度重渲染
});
//这里 .layui-table-header 第二个元素是固定列 第一个是需要获取的
$(".layui-table-header").eq(1).find("tr").eq(0).height($(".layui-table-header").eq(0).find("tr").eq(0).height());
}
})
如果你的列表里有排序 sort ,需要添加一个sort监听事件
table.on('sort(test)', function(obj){ //注:sort 是工具条事件名,test 是 table 原始容器的属性 lay-filter //表格内容高度重渲染
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
//表头高度重渲染
});
$(".layui-table-header").eq(1).find("tr").eq(0).height($(".layui-table-header").eq(0).find("tr").eq(0).height());
});
版权声明:本文为Whales_w原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。