zTree模拟selectTree

先看效果：

 

 

 

html部分

<input type="hidden" class="form-control" id="xzqbm"/> 
<input type="text" class="form-control" id="queryXzqName" style="" readonly onclick="showQueryXzqTree()" placeholder="点击选择行政区"/> 
<div class="treeBox">
　　<ul class="ztree" id="queryXzqTree">
　　</ul>
</div>

css 部分

.treeBox{
　　height: 0px; 
　　position: relative; 
　　top: 0px;
}
.treeBox > ul{
　　display: none; 
　　overflow-y: auto; 
　　height: 250px; 
　　width: 100%; 
　　z-index: 9; 
　　top: 2px; 
　　border-radius: 4px; 
　　position: relative; 
　　border: 1px solid #7B9DD4; 
　　background-color: #fff;
}

js 部分

function showQueryXzqTree() {
    $("#queryXzqTree").show();
    $("body").bind("mousedown", onBodyDownByQueryMapTree);

　var treeData = [{id: "431002", pId: "431000", name: "北湖区"},
　　{id: "431002002", pId: "431002", name: "芙蓉乡"},
　　{id: "431002003", pId: "431002", name: "华塘镇"},
　　{id: "431002004", pId: "431002", name: "保和镇"}];

var setting = {
        data : {
            simpleData : {
                enable : true
            }
        },
        callback : {
            onClick : function(event, treeId, treeNode) {
                $("#xzqbm").val(treeNode.id);
                $("#queryXzqName").val(treeNode.name);
                $("#queryXzqTree").hide();
                $("body").unbind("mousedown", onBodyDownByQueryMapTree);
                
                $("#queryXzqName").show();                
            },
        }
    };
    var zTree = $.fn.zTree.init($("#queryXzqTree"), setting, treeData);    
    var treeObj = $.fn.zTree.getZTreeObj("queryXzqTree");
    var nodes = treeObj.getNodes();
    if (nodes.length>0) {
        for(var i=0;i<nodes.length;i++){
            treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点
        }
    }
}
// 点击隐藏逻辑
function onBodyDownByQueryMapTree(event) {
    if (event.target.id.indexOf('queryXzqTree') == -1) {
        if (event.target.id != 'queryXzqNameYdwp') {
            $("#queryXzqTree").hide();
            $("#queryXzqName").show();
        }
    }
}