解决Layui表格需表头固定悬浮的问题

      发布在:前端技术      评论:0 条评论

首先添加样式类

.table-header-fixed {
top: 0;
position: fixed;
z-index: 999;
}

在table表格渲染完后,增加js代码如下

var 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'); //移除样式
   }
});
//滚动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的内容反向(-)移动
});


相关文章

在数据表格上,操作按钮太多的时候,页面展示不全,下拉显示所有按钮时,点击无效。需要在js中添加代码,放在layui.use()里面即可。$(document).off('mousedown', '.layui-table-grid-down') .on('mousedown', '.layui-table-grid-down&#

layuimini后台点击右侧菜单实现重新加载页面

本文介绍了如何解决更新数据表内容报 #1036 - Table 'ymwl_admin' is read only 的问题,包括错误原因和解决方法,并提供了相关的命令和示例代码。

`layui-disabled` 类和 `readonly` 属性都是用来禁用表单元素的,但是它们的作用有所不同。`layui-disabled` 类是 layui 自定义的禁用样式类,它可以禁用表单...

layui layui redio 表单提交验证

在Layui中,可以使用表单验证组件来实现身份证验证的功能。主要步骤如下:1. 在HTML页面中引入Layui的表单验证组件:2. 在HTML页面中添加一个表单,并给需要验证的输入框添加相应的属性和值...

热门推荐