layui如何固定表格的表頭

這篇文章將為大家詳細講解有關layui如何固定表格的表頭，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

layui固定表格表頭的方法：首先找到layui中的table.js文件；然后在變量table中加入fiexdRowHeight屬性；最后添加代碼為“if(Object.prototype.toString.call(...))”即可。

實現效果:表頭和底部分頁固定，鼠標滾動只會滾頂body中數據。效果如下：

1、找到layui中的table.js文件，在變量table中加入屬性，如圖紅框中內容：

fiexdRowHeight：是否開啟固定行高，默認是false

fiexdRowHeight_rows：表格中顯示條數，默認是10條

以上兩個參數都可以通過自己傳入參數值

2、找到pullData函數：

在此函數中ajax異步請求成功回調的success函數中最后添加如下代碼：

//固定行高、表頭處理
if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) {
    var p_ = $("[lay-id='" + options.id +  "']")
    var tr_len = p_.find(ELEM_MAIN).find("tr").length
    if(tr_len > 10){
        if(Object.prototype.toString.call(options.fiexdRowHeight_rows).slice(8, -1) !== 'Number') {
            options.fiexdRowHeight_rows = 10
        }
        var height_main = (options.fiexdRowHeight_rows * 39) + 'px'
        var height_fixed = (options.fiexdRowHeight_rows * 39) + 'px'
        //如果出現橫向滾動條時
        if(p_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {
            height_main = ((options.fiexdRowHeight_rows * 39) + 18) + 'px'
        }
        p_.find(ELEM_MAIN).css("height", height_main);
        p_.find(ELEM_FIXL).find(ELEM_BODY).css("height", height_fixed);
        p_.find(ELEM_FIXR).find(ELEM_BODY).css("height", height_fixed);
    }else {
        p_.find(ELEM_MAIN).css("height", "auto");
        p_.find(ELEM_FIXL).find(ELEM_BODY).css("height", "auto");
        p_.find(ELEM_FIXR).find(ELEM_BODY).css("height", "auto");
    }
}

3、應用：如圖：

關于layui如何固定表格的表頭就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。