您现在的位置是:首页 > 前端 > 网站首页前端

风三郎 2021-08-04 11:27:56 1337人次围观
简介 解决layui锁定列后内容区和锁定区高度不一致的问题

解决layui锁定列后内容区和锁定区高度不一致的问题

 

废话不多说直接上代码

var id="mytable";
//动态监听表头高度变化,冻结行跟着改变高度
$("div [lay-id='" + id + "'] .layui-table-header tr").resize(function () {
    $("div [lay-id='" + id + "'] .layui-table-header tr").each(function (index, val) {
        $($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
    });
});
//初始化高度,使得冻结行表头高度一致
$("div [lay-id='" + id + "'] .layui-table-header  tr").each(function (index, val) {
    $($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
//动态监听表体高度变化,冻结行跟着改变高度
$("div [lay-id='" + id + "'] .layui-table-main tr").resize(function () {
    $("div [lay-id='" + id + "'] .layui-table-body tr").each(function (index, val) {
        $($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
    });
});
//初始化高度,使得冻结行表体高度一致
$("div [lay-id='" + id + "'] .layui-table-main tr").each(function (index, val) {
    $($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});

//初始化滚动条
$("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-body").animate({ scrollTop: $("div [lay-id='" + id + "'] .layui-table-main").scrollTop() }, 0);

 

done: function(res, curr, count){
   //如果是异步请求数据方式,res即为你接口返回的信息。
   //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
//  console.log(res);
// 防止分页变形
{if condition="in_array($table,['shop','staff'])"}
   if(curr==1){
    // console.log(456);
      var height=$(".layui-table-view").height();
     $(".layui-table-view").height(height+40);
   }

 {/if}
 
    try 
    {  
         if(typeof(eval(sumary))=="function")  
        {
            sumary(res.sumary);
        }
     }catch(e)
     {
      //alert("not function"); 
     } 
   //得到当前页码
   //console.log(curr); 
   
   //得到数据总量
  // console.log(count);
     // 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
     $(".layui-table-main  tr").each(function (index, val) {
         $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
     });


 }

 

文章评论

来说点儿什么吧...

评论内容:

客服在线

服务时间

周一至周日 08:00-22:00

登录与注册