这次做项目还用到了另一个tree树的插件,就是input输入框下拉tree树

我这只是简单的下拉显示tree树,没有tree树的添加、编辑、删除、移动等操作

先看图片

zTree官方API文档

http://www.treejs.cn/v3/api.php

上代码###

  1. 引入的js
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
 <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
 <script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>

js文件包括源码上传至百度云:https://pan.baidu.com/s/1iOtplePD1gwYBme8y4BD4w 2. 代码

<html xmlns="http://www.w3.org/1999/xhtml" >
	<head runat="server">
		<meta charset="UTF-8"> <!-- for HTML5 -->
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
		<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
		<script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	       
	    var setting = {
	        view: {
	            showIcon: false//设置 zTree 是否显示节点的图标。默认值:true
				showLine: false//设置 zTree 是否显示节点之间的连线。默认值:true
	        },
	        data: {         
	            simpleData: {
	                enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
					不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
					默认值:false
					ztree有两种数据格式1、标准数据格式 2、简单数据格式(我们常用的json数据格式,也就是我下面的数据格式)
					idKey: "id",//你后台返回的json的id字段(节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效])
					pIdKey: "pId",//你后台返回的json的父级id字段(节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效])
					rootPId: 0(用于修正根节点父节点数据,即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效])
	            }
	        },
	        callback: {            
	            onClick: onClick//用于捕获节点被点击的事件回调函数
				//如果设置了 setting.callback.beforeClick 方法,且返回 false,将无法触发 onClick 事件回调函数。
	        }
	    };
		
		var filename;
	    var parentids;
	    var parentId;
			    
	    function onClick(e, treeId, treeNode) {        
	        $('#txtTreeSelect').val(treeNode.name);
			 alert(treeNode.tId + ", " + treeNode.name);//每次点击节点后, 弹出该节点的 Id、name 的信息
			 filename = getFilePath(treeNode);//获取所有父节点的名字
	         parentids = getFileId(treeNode);//获取所有父节点的id
	         parentId = treeNode.id;//获取点击节点的id
	    }
		//获取所有父节点名字
	    function getFilePath(treeObj){
	        if(treeObj==null)return "";
	        var filename = treeObj.name;
	        var pNode = treeObj.getParentNode();
	        if(pNode!=null){
	            filename = getFilePath(pNode) +">"+ filename;
	        }
	        return filename;
	    }
	    //获取所有父节点id
	    function getFileId(treeObj){
	        if(treeObj==null)return "";
	        var id = treeObj.id;
	        var pNode = treeObj.getParentNode();
	        if(pNode!=null){
	            id = getFileId(pNode) +">"+ id;
	        }
	        return id;
	    }
	
	    function showMenu() {//输入框的点击事件
	        var cityObj = $('#txtTreeSelect'); 
	        var cityOffset = cityObj.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();
	        }
	    }
	
	    $(document).ready(function () {//一进页面就会加载的方法
	        var zNodes =[//自定义json
	            { id:1, pId:0, name:"父节点1 - 展开", open:true,url:"jyy"},
	            { id:11, pId:1, name:"父节点11 - 折叠"},
	            { id:111, pId:11, name:"叶子节点111"},
	            { id:112, pId:11, name:"叶子节点112"},
	            { id:113, pId:11, name:"叶子节点113"},
	            { id:114, pId:11, name:"叶子节点114"},
	            { id:12, pId:1, name:"父节点12 - 折叠"},
	            { id:121, pId:12, name:"叶子节点121"},
	            { id:122, pId:12, name:"叶子节点122"},
	            { id:123, pId:12, name:"叶子节点123"},
	            { id:124, pId:12, name:"叶子节点124"},
	            { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
	            { id:2, pId:0, name:"父节点2 - 折叠"},
	            { id:21, pId:2, name:"父节点21 - 展开", open:true},
	            { id:211, pId:21, name:"叶子节点211"},
	            { id:212, pId:21, name:"叶子节点212"},
	            { id:213, pId:21, name:"叶子节点213"},
	            { id:214, pId:21, name:"叶子节点214"},
	            { id:22, pId:2, name:"父节点22 - 折叠"},
	            { id:221, pId:22, name:"叶子节点221"},
	            { id:222, pId:22, name:"叶子节点222"},
	            { id:223, pId:22, name:"叶子节点223"},
	            { id:224, pId:22, name:"叶子节点224"},
	            { id:23, pId:2, name:"父节点23 - 折叠"},
	            { id:231, pId:23, name:"叶子节点231"},
	            { id:232, pId:23, name:"叶子节点232"},
	            { id:233, pId:23, name:"叶子节点233"},
	            { id:234, pId:23, name:"叶子节点234"},
	            { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
				];
	
	        $.fn.zTree.init($("#treeDemo"), setting, zNodes);   //zTree的初始化方法     
	    });
	
	</script>
	    <title></title>
	</head>
	<body>
	    <form id="form1" runat="server">
	    <div>
	        <input id="txtTreeSelect" type="text" onclick="showMenu(); return false;"/>//输入框
	    </div>
		<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
			<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 120px; height:80px;">
			</ul>
		</div>//tree树的div块
	    </form>
	</body>
	</html>