layui select

使用方法

HTML

<input type="text" id="treeselecttest" lay-filter="demo" placeholder="模块" autocomplete="off" class="layui-input">

JS

layui.use('treeselect',
        function () {
            treeselect = layui.treeselect;
            treeselect.render(
            {
                elem: "#id",
                data: [url|tree data],
                method: "GET"
            });
        });

控件赋值后重新渲染

//全部treeselect
treeselect.render();
//支持filter筛选
treeselect.render({filter:'demo'});

参数：
filter：当filter不为空或者options为空时，为重新渲染模式
elem：控件ID（#）获取className（.）
data：树形数据或者获取树形数据的URL地址
method：当data为url时，ajax的请求方式

完整代码

//treeSelect组件
layui.define('tree', function (exports) {
    "use strict";

    var _MOD = 'treeselect',
        treeData = {}, //全局树形数据缓存
        $ = layui.jquery,
        hint = layui.hint(),
        DISABLED = 'layui-disabled',
        win = $(window),
        TreeSelect = function() {
            this.v = '1.0.0';
        };
    /**
    * 初始化下拉树选择框
    */
    TreeSelect.prototype.render = function (options) {
        var that = this,
            othis =options? $(options.elem):null,
            tips = '请选择',
            CLASS = 'layui-form-select',
            TITLE = 'layui-select-title',
            NONE = 'layui-select-none',
            initValue = '',
            thatInput,
            isString = function(obj) {
                return Object.prototype.toString.call(obj) === "[object String]";
            },
            settext = function (data, val, input) {
                $.each(data,
                    function (_, o) {
                        if (o.id === val) {
                            input.val(o.name);
                            return false;
                        }
                        if (o.children)
                            settext.call(this, o.children, val, input);
                    });
            },
            hide = function(e, clear) {
                if (!$(e.target).parent().hasClass(TITLE) || clear) {
                    $('.' + CLASS).removeClass(CLASS + 'ed ' + CLASS + 'up');
                    thatInput && initValue && thatInput.val(initValue);
                }
                thatInput = null;
            },
            events = function(reElem,treeid, disabled) {
                var title = reElem.find('.' + TITLE),
                    input = title.find('input'),
                    tree = reElem.find('.layui-tree'),
                    o = treeData,
                    defaultVal = othis.val();

                //如果控件有默认值，设置默认值
                if (defaultVal)
                    settext.call(this, o.data, defaultVal, input);

                if (disabled) return;

                //展开下拉
                var showDown = function () {
                        
                    var top = reElem.offset().top + reElem.outerHeight() + 5 - win.scrollTop(),
                        downHeight = win.height() - top - 13,
                        dlHeight = tree.outerHeight();
                        if (downHeight < 300)
                            tree.css("max-height", downHeight + "px");

                        reElem.addClass(CLASS + 'ed');

                        //上下定位识别
                        if (top + dlHeight > win.height() && top >= dlHeight) {
                            reElem.addClass(CLASS + 'up');
                        }
                    },
                    hideDown = function() {
                        reElem.removeClass(CLASS + 'ed ' + CLASS + 'up');
                        input.blur();
                    };

                //点击标题区域
                title.on('click',
                    function(e) {
                        reElem.hasClass(CLASS + 'ed')
                            ? (
                                hideDown()
                            )
                            : (
                                hide(e, true),
                                showDown()
                            );
                        tree.find('.' + NONE).remove();
                    });

                //点击箭头获取焦点
                title.find('.layui-edge').on('click',
                    function() {
                        input.focus();
                    });

                //键盘事件
                input.on('keyup',
                        function(e) {
                            var keyCode = e.keyCode;
                            //Tab键
                            if (keyCode === 9) {
                                showDown();
                            }
                        })
                    .on('keydown',
                        function(e) {
                            var keyCode = e.keyCode;
                            //Tab键
                            if (keyCode === 9) {
                                hideDown();
                            } else if (keyCode === 13) { //回车键
                                e.preventDefault();
                            }
                        });
                //渲染tree
                layui.tree({
                    elem: "#" + treeid,
                    click: function(obj) {
                        othis.val(obj.id).removeClass('layui-form-danger');
                        input.val(obj.name);
                        tree.find(".youyao-this").removeClass("youyao-this");
                        hideDown(true);
                        if (o.selectcall)
                            o.selectcall(obj);
                        return false;
                    },
                    nodes: o.data
                });
                //点击树箭头不隐藏
                tree.find(".layui-tree-spread").on('click',
                    function() {
                        return false;
                    });
                //关闭下拉
                $(document).off('click', hide).on('click', hide);
            },
            init = function(treeid) {
                var hasRender = othis.next('.' + CLASS),
                    disabled = othis[0].disabled,
                    value = othis.value,
                    placeholder = othis.attr("placeholder") ? othis.attr("placeholder") : tips;
                if (typeof othis.attr('lay-ignore') === 'string') return othis.show();
                //隐藏原控件
                othis.hide();
                othis.addClass("layui-input-treeselect");
                othis.attr("data-treeid", treeid);
                //替代元素
                var reElem = $([
                    '<div class="layui-unselect ' + CLASS + (disabled ? ' layui-select-disabled' : '') + '">',
                    '<div class=" +
                    TITLE +
                    "><input type="text" placeholder="' +
                    placeholder +
                    '" id="' +
                    treeid +
                    "_text" +
                    '" value="' +
                    (value ? selected.html() : '') +
                    '" readonly class="layui-input layui-unselect' +
                    (disabled ? (' ' + DISABLED) : '') +
                    '">', '<i class="layui-edge"></i></div>',
                    '<ul id="' + treeid + '" class="layui-anim layui-anim-upbit layui-tree"></ul>', '</div>'
                ].join(''));
                hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
                othis.after(reElem);
                events.call(this, reElem, treeid, disabled);
            },
            reset = function(filter) {
                var trees = filter ? $('*[lay-filter="' + filter + '"]') : $(".layui-input-treeselect");
                layui.each(trees,
                    function (_, one) {
                        othis = $(one);
                        var treeid = othis.attr("data-treeid");
                        init.call(this, treeid);
                    });
            };
        if (!options)
            return reset.call(this,null);
        if (options.filter)
            return reset.call(this,options.filter);
        if (!othis[0])
            return hint.error('layui.treeSelect 没有找到' + options.elem + '元素');
        if (!options.data)
            return hint.error(
                'layui.treeSelect 缺少参数 data ,data 可直接指定treedata，也可以是treedata数据url，treedata参见layui tree模块');
        var treeid = "selecttree_" + options.elem.replace("#", "");
        if (!isString.call(this, options.data)) {
            //缓存tree data
            treeData = options;
            init.call(this, treeid);
        } else {
            $.ajax({
                url: options.data,
                dataType: "json",
                type: !options.method ? "POST" : options.method,
                success: function(d) {
                    options.data = d;
                    treeData = options;
                    init.call(this, treeid);
                }
            });
        }
    };
    var treeSelect = new TreeSelect();
    //暴露接口
    exports(_MOD, treeSelect);
});

样式表扩展

/**treeselect*/
.layui-form-select .layui-tree {
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    padding: 5px 0;
    z-index: 999;
    min- 100%;
    border: 1px solid #d2d2d2;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    box-sizing: border-box;
}
.layui-form-selected .layui-tree {
    display: block;
}

效果
 

欢迎拍砖

转载地址https://fly.layui.com/jie/17493/page/2/