layui怎麼固定表格的表頭

layui固定表格表頭的方法：首先找到layui中的table.js檔案；然後在變數table中加入fiexdRowHeight屬性；最後將程式碼為「if(Object.prototype.toString.call(.. .))」即可。

推薦：《layUI教學》

實現效果:表頭與底部分頁固定，滑鼠捲動只會滾頂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怎麼固定表格的表頭的詳細內容。更多資訊請關注PHP中文網其他相關文章！