layui table中select顯示優化-有解無憂

　　專案中經常用到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 ></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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7191.html

標籤：JavaScript

上一篇：Kafka Consumer每次啟動都重置offset到指定位置，不能從上次位置繼續消費

下一篇：JavaScript 基礎四