Query+ztree实现下拉树复选框功能

完整项目下载链接：
CSDN下载页
文件比较大是由于该功能是在公司项目中实现的，公司用了AdminLTE.css，其实做这个功能用到的并不多，如果不用该css也没影响，就是下拉框div会变成圆角，自己改下样式就行了。在打包上传的时候我将jquery，bootstrap，adminLte，还有font字体文件都一起打包了，其实核心代码并没多少，已在下边贴出。

效果图如下：

依赖zTree和jQuery。
下边是实现代码：

[css]
.combtree{
     display:block;
     width:200px;
     position:relative
 }
.combtree i{
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
}
.drop{
    position: absolute;
    padding:0 10px 5px 5px;
    min-width: 200px;
    max-width: 300px;
    min-height: 200px;
    max-height: 400px;
    border:1px solid #aaa;
    box-shadow: 10px 10px 5px #888888;
    background-color: #fff;
    z-index:999;
    overflow: scroll;
    display: none;
}

[javascript 代码]
var Tree=function($tree){
    this.isInit=false;
    this.treeId=uuid(8,16);
    /**
     * 下拉树结构模版
     */
    this.domObj={
        combtree:$tree,
        input:$("<input type='text' class='form-control'  placeholder='请选择...' readonly   >"),
        i:$("<i class='glyphicon glyphicon-chevron-down'></i>"),
        drop:$("<div class='drop'></div>"),
        tree:$("<div class='ztree' id='"+this.treeId+"'></div>")
    };
    this.datas=[];
    this.setting={
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: function(event, treeId, treeNode){
                var treeObj = $.fn.zTree.getZTreeObj(treeId);
                var nodes = treeObj.getCheckedNodes(true);
                var combtree=treeObj.context;
                if(nodes.length>0){
                    var selectNodesName=[];
                    var selectNodesId=[];
                    var setting=treeObj.setting.data.simpleData;
                    var id=setting.idKey;
                    nodes.forEach(function(el,index,arr){
                        if(!el.isParent){
                            selectNodesName.push(el["name"]);
                            selectNodesId.push(el[id]);
                        }
                    });
                    combtree.domObj.input.val(selectNodesName[0]+", ...");
                    combtree.domObj.input.attr("title",selectNodesName.join(","));
                    combtree.domObj.combtree.data("val",selectNodesId);
                }
            }
        }
    };
};
Tree.prototype= {
    /**
     * 初始化下拉树
     * @param options.datas 简单数据格式的树
     * @param options.otherSetting 可以对ztree的setting配置进行覆盖
     */
    init:function(options){
        this.datas=options.datas;
        delete options.datas;
        this.setting= $.extend(true,{},this.setting,options);
        this.buildDom();
        var treeObj=$.fn.zTree.init(this.domObj.tree, this.setting,this.datas);
        treeObj.expandAll(true);
        this.isInit=true;
        treeObj.context=this;
        //初始化选中,保存默认选中的值
        var nodes = treeObj.getCheckedNodes(true);
        if(nodes.length>0){
            var selectNodesName=[];
            var selectNodesId=[];
            var setting=treeObj.setting.data.simpleData;
            var id=setting.idKey;
            nodes.forEach(function(el,index,arr){
                if(!el.isParent){
                    selectNodesName.push(el["name"]);
                    selectNodesId.push(el[id]);
                }
            });
            this.domObj.input.val(selectNodesName[0]+", ...");
            this.domObj.input.attr("title",selectNodesName.join(","));
            this.domObj.combtree.data("val",selectNodesId);
        }
    },
    buildDom:function(){
        var dom=this.domObj;
        dom.combtree.append(dom.input).append(dom.i).append(dom.drop);
        dom.drop.append(dom.tree);
        dom.combtree.on("click",function(e){
            $(this).find(".drop").show();
            $(document).on("click", function(){
                if($(".drop").is(':visible'))$(".drop").hide();
            });
            e.stopPropagation();
        });
    },
    value:function(){
        return this.domObj.combtree.data("val")?this.domObj.combtree.data("val"):[];
    }
};

//uuid 生成器
function uuid(len, radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    var uuid = [], i;
    radix = radix || chars.length;
    if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
    } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';
        for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random()*16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
        }
    }

    return uuid.join('');
}
[html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉树开发</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/AdminLTE.css"/>
    <link rel="stylesheet" href="./css/metro.css">
    <link rel="stylesheet" href="./css/combtree.css"/>
    <script src='./js/jquery-3.1.0.min.js'></script>
    <script src='./js/bootstrap-ztree.js'></script>
    <script src="./js/testdata.js"></script>
    <script src="./js/uuid.js"></script>
    <script src="./js/combtree.js"></script>

<script>
    $(document).ready(function() {
        var tree = new Tree($(".combtree"));
        tree.init({datas: zNodes});

    });
</script>
</head>
<body>
    <div style="margin: 50px">
        <div class="combtree">
        </div>
    </div>
</body>
</html>