layui表格固定表頭統一處理方案

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

一、找到layui中的table.js文件,在變量table中加入屬性,如圖紅框中內容:css

fiexdRowHeight:是否開啓固定行高,默認是falsejava

fiexdRowHeight_rows:表格中顯示條數,默認是10條ajax

以上兩個參數均可以經過本身傳入參數值異步

二、找到pullData函數:函數

 在此函數中ajax異步請求成功回調的success函數中最後添加以下代碼:ui

//固定行高、表頭處理
if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) {
    var div_ = $("[lay-id='" + options.id +  "']")
    var tr_len = div_.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(div_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {
            height_main = ((options.fiexdRowHeight_rows * 39) + 18) + 'px'
        }
        div_.find(ELEM_MAIN).css("height", height_main);
        div_.find(ELEM_FIXL).find(ELEM_BODY).css("height", height_fixed);
        div_.find(ELEM_FIXR).find(ELEM_BODY).css("height", height_fixed);
    }else {
        div_.find(ELEM_MAIN).css("height", "auto");
        div_.find(ELEM_FIXL).find(ELEM_BODY).css("height", "auto");
        div_.find(ELEM_FIXR).find(ELEM_BODY).css("height", "auto");
    }
}

三、應用:如圖:prototype

相關文章
相關標籤/搜索