一、描述二、解决三、需知
一、描述
当表格内容过多:表头离开页面可视范围时,把表头固定悬浮在上面,如下图所示:
[ 修改前 ]
[ 修改后 ]
二、解决
思路:问题的关键是如何知道表头是否超出可视范围,首先我们需要知道表头到文档顶部的距离,这个距离是不会变的(除非操控DOM),然后监听滚动条滚动的距离。如果前者减去后者小于0,则表示离开了可视范围。
先在Layui表格渲染完成的回调函数里写:
done:function(res, curr, count) {let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离$(window).scroll(function () {if ((headerTop - $(window).scrollTop()) < 0) {//超过了$('.layui-table-header').addClass('table-header-fixed'); //添加样式,固定住表头} else {//没超过$('.layui-table-header').removeClass('table-header-fixed'); //移除样式}});}
然后再添加样式
.table-header-fixed {top: 0;position: fixed;z-index: 999;}
如果表格的列足够多,表格最下方就会有一个横向滚动条,我们拖动这个滚动条
,表格头由于固定了并不会跟着移动
,为了解决这个问题,加上以下代码:
//滚动body,header跟随滚动$('.layui-table-body').on('scroll', function(e) {var leftPx = $(e.target).scrollLeft(); //获取表格body,滚动条距离左边的长度var left = 'translateX(-' + leftPx + 'px)';$('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动});
三、需知
*
Table下面的参数height
,请务必了解
Layui-数据表格-基础参数一览表Layui-数据表格-基础参数一览表-参数height
【官方文档table
下的height
参数解释如下】
示例
//“方法级渲染”配置方式table.render({//其它参数在此省略height: 315 //固定值}); table.render({//其它参数在此省略height: 'full-20' //高度最大化减去差值}); 等价于(“自动化渲染”配置方式)<table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table><table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>