解決Layui表格需表頭固定懸浮的問題

 

一、描述

當表格內容過多：表頭離開頁面可視范圍時，把表頭固定懸浮在上面，如下圖所示：
[ 修改前 ]
[ 修改后 ]

二、解決

思路：問題的關鍵是如何知道表頭是否超出可視范圍，首先我們需要知道表頭到文檔頂部的距離，這個距離是不會變的（除非操控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的內容反向(-)移動
});