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

創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標志設(shè)計、成都全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、手機網(wǎng)站制作設(shè)計、微商城、網(wǎng)站托管及成都網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標準。已經(jīng)為成都資質(zhì)代辦行業(yè)客戶提供了網(wǎng)站改版服務(wù)。

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

實現(xiàn)效果:表頭和底部分頁固定，鼠標滾動只會滾頂body中數(shù)據(jù)。效果如下：

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

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

fiexdRowHeight_rows：表格中顯示條數(shù)，默認是10條

以上兩個參數(shù)都可以通過自己傳入?yún)?shù)值

2、找到pullData函數(shù)：

在此函數(shù)中ajax異步請求成功回調(diào)的success函數(shù)中最后添加如下代碼：

//固定行高、表頭處理
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'
        //如果出現(xiàn)橫向滾動條時
        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、應(yīng)用：如圖：

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

新聞標題：layui如何固定表格的表頭-創(chuàng)新互聯(lián)
本文來源：http://www.chinadenli.net/article4/dgecoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)