现在位置首页 / 前端开发 /正文

ztree教程--两个ztree树并存实现下拉框

作者: IT小兵 | 2014年5月23日| 热度:℃ | 评论: |参与:

前几天有人问我,怎么实现2个ztree并存,实现下拉菜单。今天分享一下这个简单的代码。

如图:

实现方法说明

  • 用 zTree 实现这种下拉菜单,应该说是比较容易的,你只需要控制 zTree 所在容器的隐藏/显示,以及位置即可。

  • zTree v3.x 实现了多点选中功能,因此对于需要多选的下拉菜单也易如反掌。

  • 利用 setting 的各项配置参数,完全可以满足大部分的功能需求。

代码非常简单:

<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO - select menu</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
	  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
    <script type="text/javascript">
        //设置全局变量用于记录是选择第几个文本框
        var CurInput = 0;
		<!--
        var setting = {
            view: {
                dblClickExpand: false,
                selectedMulti: true, //是否允许多选
                txtSelectedEnable: false //是否允许选中节点的文字
                //autoCancelSelected: false //不允许按下Ctrl键取消节点选中状态
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick
            }
        };
        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 beforeClick(treeId, treeNode) {
            var check = (treeNode && !treeNode.isParent);
            if (!check) alert("只能选择城市...");
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //判断当前节点是否选中 如果选中则取消选中,反之选中
            debugger
            if (zTree.isSelectedNode(treeNode)) {
                zTree.cancelSelectedNode(treeNode);
            } else {
                zTree.selectNode(treeNode);
            }
            return check;
        }
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");            
            var nodes = zTree.getSelectedNodes(),
			v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = null;
            if(CurInput == 1)
            {
               cityObj = $("#citySel");  
               cityObj.attr("value", v);          
            }else
            {
                cityObj = $("#citySelTwo");  
                cityObj.attr("value", v);
             }
            
            return false;
        }
        function showMenu() {
            CurInput = 1; //标记第一个文本框
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
            $("body").bind("mousedown", onBodyDown);
        }
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }        
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }
        //=============================
        //城市2相关的下拉配置
        function showMenuTwo() {
            CurInput = 2; //标记第二个文本框
            var cityObj = $("#citySelTwo");
            var cityOffset = $("#citySelTwo").offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
            $("body").bind("mousedown", onBodyDownTwo);
        }
        function hideMenuTwo() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDownTwo);
        }
        function onBodyDownTwo(event) {
            if (!(event.target.id == "menuBtnTwo" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
		//-->
	</script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <h1>
        下拉菜单</h1>
    <h6>
        [ 文件路径: super/select_menu.html ]</h6>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul class="list">
                <li class="title">&nbsp;&nbsp;<span class="highlight_red">选择城市时,按下 Ctrl 键可以进行多选</span></li>
                <li class="title">&nbsp;&nbsp;城市1:<input id="citySel" type="text" readonly value=""
                    style="width: 120px;" />
                    &nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li>
                <li class="title">&nbsp;&nbsp;城市2:<input id="citySelTwo" type="text" readonly value=""
                    style="width: 120px;" />
                    &nbsp;<a id="menuBtnTwo" href="#" onclick="showMenuTwo(); return false;">选择</a></li>
            </ul>
        </div>
        <div class="right">
            <ul class="info">
                <li class="title">
                    <h2>
                        实现方法说明</h2>
                    <ul class="list">
                        <li>用 zTree 实现这种下拉菜单,应该说是比较容易的,你只需要控制 zTree 所在容器的隐藏/显示,以及位置即可。</li>
                        <li class="highlight_red">zTree v3.x 实现了多点选中功能,因此对于需要多选的下拉菜单也易如反掌。</li>
                        <li class="highlight_red">利用 setting 的各项配置参数,完全可以满足大部分的功能需求。</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
        </ul>
    </div>
</body>
</html>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询