问题:表格内容增加了自动换行功能,当行高发生改变时发现右侧固定列行高不匹配。
原因: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 {
$ ( ".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 ( ) ) ;
}
} )
如果你的列表里有排序 sort ,需要添加一个sort监听事件
table. on ( 'sort(test)' , function ( obj) {
$ ( ".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 ( ) ) ;
} ) ;