layui table中select顯示優化

阿新 • • 發佈：2020-08-11

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

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

1、我們增加一行樣式：

.layui-table-cell {
            overflow: visible;
        }

　　效果如下：雖然select功能可以使用了但是還是很彆扭那麼我們繼續優化；

2、繼續追加樣式：

        .layui-table-box , .layui-table-body {
            overflow: visible;
        }

　　效果如下：這種解決辦法，適用於table不定高的情況；

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

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

程式碼：

　　主要引入了optimizeSelectOption 外掛，稍後上原始碼。

    layui.config({
        base: "./layui/lay/my-modules/"
    }).extend({
        optimizeSelectOption: "optimizeSelectOption/optimizeSelectOption",// 
引入js
    }).use(['layer','element', 'table','form','optimizeSelectOption'], function(){
        var  $ = layui.$, layer = layui.layer, form = layui.form, table = layui.table, element = layui.element;

        var pathTemp = layui.cache.modules['optimizeSelectOption'] || '';
        var filePath = pathTemp.substr(0, pathTemp.lastIndexOf('/'));

         
// 引入css
        layui.link(filePath + '/optimizeSelectOption.css');



    });

optimizeSelectOption .js

/*!

 @Title: optimizeSelectOption
 @Description：優化select在layer和表格中顯示的問題
 @Site:
 @Author: 歲月小偷
 @License：MIT

 */
;!function (factory) {
    'use strict';
    var modelName = 'optimizeSelectOption';
    if (!window.top.layui) {
        // 頂層引入layui是使用該元件的最低要求
        console.warn('使用外掛：' + modelName + '頁面頂層視窗必須引入layui');
        layui.define(['form'], function (exports) {
            exports(modelName, {msg: '使用外掛：' + modelName + '頁面頂層視窗必須引入layui'});
        });
    } else {
        // 利用的是頂層的top去彈出，所以用top的layui去use layer確保頂層
        window.top.layui.use('layer', function () {
            layui.define(['form'], function (exports) { //layui載入
                exports(modelName, factory(modelName));
            });
        });
    }
}(function (modelName) {
    var version = '0.2.0';
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;

    var filePath = layui.cache.modules.optimizeSelectOption
        .substr(0, layui.cache.modules.optimizeSelectOption.lastIndexOf('/'));
    // 引入tablePlug.css
    layui.link(filePath + '/optimizeSelectOption.css?v' + version);

    var selectors = [
        '.layui-table-view',      // layui的表格中
        '.layui-layer-content',   // 用type:1 彈出的layer中
        '.select_option_to_layer' // 任意其他的位置
    ];
    // 記錄彈窗的index的變數
    window.top.layer._indexTemp = window.top.layer._indexTemp || {};

    if (!form.render.plugFlag) {
        // 只要未改造過的才需要改造一下
        // 保留一下原始的form.render
        var formRender = form.render;
        form.render = function (type, filter, jqObj) {
            var that = this;
            var retObj;
            // if (jqObj && jqObj.length) {
            if (jqObj) {
                layui.each(jqObj, function (index, elem) {
                    elem = $(elem);
                    var elemP = elem.parent();
                    var formFlag = elemP.hasClass('layui-form');
                    var filterTemp = elemP.attr('lay-filter');
                    // mark一下當前的
                    formFlag ? '' : elemP.addClass('layui-form');
                    filterTemp ? '' : elemP.attr('lay-filter', 'tablePlug_form_filter_temp_' + new Date().getTime() + '_' + Math.floor(Math.random() * 100000));
                    // 將焦點集中到要渲染的這個的容器上
                    retObj = formRender.call(that, type, elemP.attr('lay-filter'));
                    // 恢復現場
                    formFlag ? '' : elemP.removeClass('layui-form');
                    filterTemp ? '' : elemP.attr('lay-filter', null);
                });
            } else {
                retObj = formRender.call(that, type, filter);
            }
            return retObj;
        };
        form.render.plugFlag = true;
    }

    // 關閉彈出的選項
    var close = function () {
        window.top.layer.close(window.top.layer._indexTemp[modelName]);
    };

    // 獲得某個節點的位置 offsetTop: 是否獲得相對top window的位移
    function getPosition(elem, _window, offsetTop) {
        _window = _window || window;
        elem = elem.length ? elem.get(0) : elem;
        var offsetTemp = {};
        if (offsetTop && _window.top !== _window.self) {
            var frameElem = _window.frames.frameElement;
            offsetTemp = getPosition(frameElem, _window.parent, offsetTop);
        }
        var offset = elem.getBoundingClientRect();

        return {
            top: offset.top + (offsetTemp.top||0),
            left: offset.left + (offsetTemp.left||0)
        };
    }

    var config = {};

    // 針對某個元件的效果優化註冊方法
    var render = function (name, options) {
        var that = this;
        if (config.name) {
            console.warn('針對', name, '的顯示優化已經存在，請不要重複渲染！');
            return that;
        }

        // 優化select的選項在某些場景下的顯示問題
        $(document).on('click'
            , selectors.map(function (value) {
                // return value + ' .layui-select-title,' + value + ' .xm-select-title';
                return value + ' ' + options.triggerElem;
            }).join(',')
            , function (event) {
                layui.stope(event);
                close();
                var triggerElem = $(this);
                var titleElem = triggerElem;
                var dlElem = typeof options.dlElem === 'function' ? options.dlElem(triggerElem) : titleElem.next();
                // var selectElem = titleElem.parent().prev();
                var selectElem = titleElem.parent().prev();
                var selectupFlag = titleElem.parent().hasClass('layui-form-selectup');

                function getDlPosition() {
                    var titleElemPosition = getPosition(titleElem, window, true);
                    var topTemp = titleElemPosition.top;
                    var leftTemp = titleElemPosition.left;
                    if (selectupFlag) {
                        topTemp = topTemp - dlElem.outerHeight() + titleElem.outerHeight() - parseFloat(dlElem.css('bottom'));
                    } else {
                        topTemp += parseFloat(dlElem.css('top'));
                    }
                    if (topTemp + dlElem.outerHeight() > window.top.innerHeight && !selectupFlag) {
                        // 出現原始的form表單判斷向下彈出，但是最終彈出超出視窗下邊界的情形的處理
                        selectupFlag = true;
                        topTemp -= (dlElem.outerHeight() + (2 * parseFloat(dlElem.css('top')) - titleElem.outerHeight()));
                    }
                    return {
                        top: topTemp,
                        left: leftTemp
                    };
                }

                var dlPosition = getDlPosition();

                titleElem.css({backgroundColor: 'transparent'});
                window.top.layer._indexTemp[modelName] = window.top.layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shade: 0,
                    anim: -1,
                    fixed: titleElem.closest('.layui-layer-content').length || window.top !== window.self,
                    isOutAnim: false,
                    // offset: [topTemp + 'px', leftTemp + 'px'],
                    offset: [dlPosition.top + 'px', dlPosition.left + 'px'],
                    // area: [dlElem.outerWidth() + 'px', dlElem.outerHeight() + 'px'],
                    area: dlElem.outerWidth() + 'px',
                    content: '<div class="layui-unselect layui-form-select layui-form-selected"></div>',
                    skin: 'layui-option-layer',
                    success: function (layero, index) {
                        dlElem.css({
                            top: 0,
                            position: 'relative'
                        }).appendTo(layero.find('.layui-layer-content').css({overflow: 'hidden'}).find('.layui-form-selected'));
                        layero.width(titleElem.width());
                        // 原本的做法在ie下獲得的是auto其他的瀏覽器卻是確定的值，目前簡單處理，先自行計算出來，後面再調優
                        var bottom_computed = window.top.innerHeight - layero.outerHeight() - parseFloat(layero.css('top'));
                        selectupFlag && (layero.css({top: 'auto', bottom: bottom_computed + 'px'}));
                        // 呼叫各自的success回撥
                        typeof options.success === 'function' && options.success.call(this, index, layero);
                        // 通用的事件處理
                        layero.on('mousedown', function (event) {
                            layui.stope(event);
                        });
                        setTimeout(function () {
                            // 延遲500毫秒新增事件處理，應對ie瀏覽器下某一些特定場景下點選select出來option的時候回有一個容器滾動導致直接關閉選項的問題
                            // 不包含selectors的選擇器的節點
                            titleElem.parentsUntil(selectors.join(',')).one('scroll', function (event) {
                                // 用window.top.layer去彈出的選項在其title所在的容器滾動的時候都關閉
                                close();
                            });
                            // 單獨給選擇器的節點加上
                            titleElem.parents(selectors.join(',')).one('scroll', function (event) {
                                // 用window.top.layer去彈出的選項在其title所在的容器滾動的時候都關閉
                                close();
                            });

                            var windowTemp = window;
                            do {
                                var $Temp = windowTemp.$ || windowTemp.layui.$;
                                if ($Temp) {
                                    // 點選document的時候觸發
                                    $Temp(windowTemp.document).one('click', function (event) {
                                        close();
                                    });

                                    $Temp(windowTemp.document).one('mousedown', function (event) {
                                        close();
                                    });

                                    // 視窗resize的時候關掉表格中的下拉
                                    $Temp(windowTemp).one('resize', function (event) {
                                        close();
                                    });

                                    // 監聽滾動在必要的時候關掉select的選項彈出（主要是在多級的父子頁面的時候）
                                    $Temp(windowTemp.document).one('scroll', function () {
                                        if (top !== self && parent.parent) {
                                            // 多級巢狀的視窗就直接關掉了
                                            close();
                                        }
                                    });
                                }
                            } while (windowTemp.self !== windowTemp.top ? windowTemp = windowTemp.parent : false);
                        }, 500);
                    },
                    end: function () {
                        typeof options.end === 'function' && options.end.call(this, selectElem);
                    }
                });
            });
    };

    // 內建初始化layui的select的效果，目前還不夠晚上不提供給外部註冊一些其他有類似問題的元件的處理
    render('layuiSelect', {
        triggerElem: 'div:not(.layui-select-disabled)>.layui-select-title', // 觸發的選擇器
        success: function (index, layero) {
            // layui 的select是單選點選一個的時候就關閉layer
            layero.find('dl dd').click(function () {
                close();
            });
        },
        end: function (selectElem) {
            form.render('select', null, selectElem);
        }
    });

    return {
        version: version,
        getPosition: getPosition,
        close: close
        // render: render  // 不完善，暫不對外提供
    };
});

optimizeSelectOption .css

.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
{
    visibility: hidden;
}

.layui-layer.layui-option-layer {
    mso-border-shadow: no;
    box-shadow: none;
}

最後奉上一個很棒的demo：https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled?v0.1.9