對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('<i class="layui-icon edgeI"  style="right: 5px;top: 12px;color: rgba(153, 153, 153, 0.69);position: absolute;">&#xe625;</i>');
        $(options.elem).after('<ul id="' + options.elem.split("#")[1] + '_tree"></ul>');
        //獲取資料
        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());
});