layui table中select顯示優化

專案中經常用到table和select的情況，每次都會遇到select顯示不全或者隱藏的問題，今天記錄下解決方案：

初始化**後：select 無法正常顯示，如下：

1、我們增加一行樣式：

.layui-table-cell

2、繼續追加樣式：

.layui-table-box , .layui-table-body

3、如果table是固定高度 需要內部滾動呢，單純的設定overflow: visible;效果如下：

4、最後來個終極解決辦法，效果如下：

**：主要引入了 optimizeselectoption 外掛程式，稍後上原始碼。

layui.config().extend().use(['layer','element', 'table','form','optimizeselectoption'], function

());

/*

! @title: optimizeselectoption
@description：優化select在layer和**中顯示的問題
@site:
@author: 歲月小偷
@license：mit */
;!function
(factory) );
});} 
else
); });
}}(function
(modelname) ;
if (!form.render.plugflag) );
} else
return
retobj;
};form.render.plugflag = true
; }
//關閉彈出的選項
var close = function
() ;
//獲得某個節點的位置 offsettop: 是否獲得相對top window的位移
function
getposition(elem, _window, offsettop) ;
if (offsettop && _window.top !==_window.self) 
var offset =elem.getboundingclientrect();
return
; }
var config ={};
//針對某個元件的效果優化註冊方法
var render = function
(name, options) 
//優化select的選項在某些場景下的顯示問題
$(document).on('click', selectors.map(
function
(value) ).join(',')
, function
(event) 
else
if (toptemp + dlelem.outerheight() > window.top.innerheight && !selectupflag) 
return
; }
var dlposition =getdlposition();
titleelem.css();
window.top.layer._indextemp[modelname] =window.top.layer.open());
//呼叫各自的success**
typeof options.success === 'function' && options.success.call(this
, index, layero);
//通用的事件處理
layero.on('mousedown', function
(event) );
settimeout(
function
() );
//單獨給選擇器的節點加上
titleelem.parents(selectors.join(',')).one('scroll', function
(event) );
var windowtemp =window;
do);
$temp(windowtemp.document).one('mousedown', function
(event) );
//視窗resize的時候關掉**中的下拉
$temp(windowtemp).one('resize', function
(event) );
//監聽滾動在必要的時候關掉select的選項彈出（主要是在多級的父子頁面的時候）
$temp(windowtemp.document).one('scroll', function
() });}} 
while (windowtemp.self !== windowtemp.top ? windowtemp = windowtemp.parent : false
); }, 500);
},end: 
function
() });
});};
//內建初始化layui的select的效果，目前還不夠晚上不提供給外部註冊一些其他有類似問題的元件的處理
render('layuiselect', );
},end: 
function
(selectelem) 
});return
;});

.layui-layer-content div.layui-form-select>div.layui-select-title+ dl,

.select_option_to_layer div.layui-form-select>div.layui-select-title+ dl
.layui-layer.layui-option-layer 

layui table 滾動 鍵盤

最近使用了layui table但是發現了一系列問題，由於被封裝過不好自己修改，比如翻頁後滑動條每次都會復位，導致體驗不好，通過除錯，我發現layui table並沒有給div加id標籤，我通過class定位 div位置。可以看到 滾動條所在div class layui table body la...

Layui Table隱藏列問題

layui沒有提供table隱藏列的功能 只是寫這個文件的時候沒有提供 第一步 獲取layui的tablebox jquery物件 var table box this.table elem next find layui table box this.table elem 是指的table標籤的i...

layui table使用的坑

先來個完整案例 layui table lay even lay skin nob id trecord lay filter test table function layuitable 資料介面 page true 開啟分頁 limit 15 展示的最大行數 cols 表頭,載入完畢 done ...