发布于 2017-01-11 21:17:23 | 162 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

zTree jQuery树插件

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等。


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>



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务