对layui tree 和输入框结合扩展 treeSelect

扩展lyaui的组件 效果图如下

用法如下：

<input type="text"  id="treeSelect" autocomplete="off" class="layui-input " >

js:

treeSelect.render({
    elem:"#treeSelect",
    url:"portal",
    type:'GET',
    done:(data)=>{
        if(!!data){
            $("#treeSelect").val(data['name']).attr("data-id",data['id'])
        }
    }
})

treeSelect.js 的组件的封装：

//自定义异常
class treeSelectError extends Error {
    constructor(message) {
        super(message);
        this.name = "treeSelectError";
    }
}

///对输入框和tree 座做一个结合的扩展
layui.define(["tree", 'jquery', 'ajax', 'form'], (exports) => {

    let tree = layui.tree, $ = layui.jquery, ajax = layui.ajax, form = layui.form;
    let treeSelect = function(){};

    //icon 点击输入框 icon 的旋转
    let edgeI180=()=>{
        $(".edgeI").css({
            "filter":"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)",
            "-moz-transform":"rotate(180deg)",
            "-o-transform":"rotate(180deg)",
            "-webkit-transform":"rotate(180deg)",
            "transform":"rotate(180deg)",
            "transition":"transform 0.3s"
        }).addClass("edgeI180").removeClass("edgeI0");
    },
    edgeI0=()=>{
        $(".edgeI").css({
            "filter":"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)",
            "-moz-transform":"rotate(-0deg)",
            "-o-transform":"rotate(-0deg)",
            "-webkit-transform":"rotate(-0deg)",
            "transform":"rotate(-0deg)",
            "transition":"transform 0.3s"
        }).addClass("edgeI0").removeClass("edgeI180");
    }

    // 注册点击输入框的的点击事件
    let initInputClick = (options) => {
        $(options.elem).click(() => {
            if($('.edgeI').hasClass("edgeI180")){
                edgeI0();
            }else{
                edgeI180();
            }
            //自动展示和收放
            $(options.elem + "_tree").slideToggle("slow");
        })
    }
    //获取节点的数据
    let getNodeData=(options)=>{
         if(!!options.node){
             return options.node
         }
        let node=[];
        ajax.reqAjax({
            url:options.url,
            type: (!options.type)?'POST':options.type,
            data:options.where,
            async:false,
            success: (res) => {
               node=res.data;
            }
        })
        return node;
    }
    //初始化树形
    let initTree = (options) => {
        let w = $(options.elem).width() + 10;
            $(options.elem + "_tree").css({
                "position": "absolute",
                "z-index": "999999",
                "width": w + "px",
                "margin-top": "5px",
                "box-shadow": "0 2px 4px rgba(0,0,0,.12)",
                "box-sizing": "border-box",
                "display": "none",
                "background": "white"
            })
        let treeOpt = {
            elem: options.elem + "_tree"
            , click: function (item) { //点击节点回调
                $(options.elem + "_tree").slideToggle("slow");
                if(!!options.done && options.done instanceof  Function){
                    options.done(item,options.node);//点击事件的回调
                }
                edgeI0();
            },
            nodes:options.node
         }
        layui.tree(treeOpt);
    }
    /**
     *@Author: yw
     *@Desciption:
     *@Date:15:13 2018/7/4
     *@param:options 一个对象
     * options={
     *   elem:'',//输入框的 id
     *   node:[],//树的数据 可以为空
     *   url:'',//进行请求数据
     *   where:{},//请求额外的参数
     *   type:'',// 请求方法 POST ,
     *   done:Fu//一个方法的对象 点击选择的数据回调 所选择的数据
     *   dataFn：Fn ///返回node 的数据
     * }
     */
    treeSelect.prototype.render = (options) => {
        if (!options.elem) {
            throw new treeSelectError("treeSelect 的 elem 不可以为空 ");
        }
        $(options.elem).after('');
        $(options.elem).after('
elem.split("#")[1] + '_tree">
');
        //获取数据
        let node=getNodeData(options);
        options.node=node;
        //初始化tree
        initTree(options);
        //注册点击事件
        initInputClick(options);

        if(!!options.dataFn && options.dataFn instanceof Function) {
            options.dataFn(node);
        }
    }
    exports("treeSelect", new treeSelect());
});