實現效果:表頭和底部分頁固定,鼠標滾動只會滾頂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