zTree插件之单选下拉菜单实例代码

代码如下:

<!--ztree树结构-->
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css">

<script src="assets/js/jquery.js"></script>

<!--ztree树-->
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>

代码如下:

<div class="input-append">
                            <input class="input-medium" id="citySel" readonly type="text" value="">
                            <a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
                        </div>

<div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:300px; min-width:163px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
    <ul id="dropdownMenu" class="tree"></ul>
</div>

代码如下:

<script type="text/javascript">
    var zTree1;
    var setting = {
        isSimpleData: true,
        treeNodeKey: "id",
        treeNodeParentKey: "pId",
        fontCss: setFont,
        callback: {
            beforeClick: zTreeOnBeforeClick,
            click: zTreeOnClick
        }           
    };
    var zNodes = [
        {id:1, pId:0, name:"北京"},
        {id:2, pId:0, name:"天津"},
        {id:3, pId:0, name:"上海"},
        {id:6, pId:0, name:"重庆"},
        {id:4, pId:0, name:"河北省", open:true},
        {id:41, pId:4, name:"石家庄"},
        {id:42, pId:4, name:"保定"},
        {id:43, pId:4, name:"邯郸"},
        {id:44, pId:4, name:"承德"},
        {id:5, pId:0, name:"广东省", open:true},
        {id:51, pId:5, name:"广州"},
        {id:52, pId:5, name:"深圳"},
        {id:53, pId:5, name:"东莞"},
        {id:54, pId:5, name:"佛山"},
        {id:6, pId:0, name:"福建省", open:true},
        {id:61, pId:6, name:"福州"},
        {id:62, pId:6, name:"厦门"},
        {id:63, pId:6, name:"泉州"},
        {id:64, pId:6, name:"三明"}
    ];

function setFont(treeId, treeNode) {
        if (treeNode && treeNode.isParent) {
            return {color: "blue"};
        } else {
            return null;
        }
    }
    function showMenu(){
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast");   
    }   
    function reloadTree(){
        hideMenu();
        zTree1 = $("#dropdownMenu").zTree(setting, zNodes);
    }
    function hideMenu() {
        $("#DropdownMenuBackground").fadeOut("fast");
    }
    function zTreeOnBeforeClick(treeId, treeNode) {
        var check = (treeNode && !treeNode.isParent);
        if (!check) alert("只能选择城市...");
        return check;
    }

function zTreeOnClick(event, treeId, treeNode) {
        if (treeNode) {
            var cityObj = $("#citySel");
            cityObj.attr("value", treeNode.name);
            hideMenu();
        }
    }

$(document).ready(function(e) {
        reloadTree();
        $("#menuBtn").bind("click",
            function(){
                if($("#DropdownMenuBackground").css("display") == "none"){
                    showMenu();
                }
                else{
                    hideMenu();
                }
            }
        );
        $("body").bind("mousedown",
            function(event){
                if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) {
                    hideMenu();
                }
            });   
    });
</script>