jQuery树的实现

最新推荐文章于 2020-07-29 07:13:16 发布

许增强

最新推荐文章于 2020-07-29 07:13:16 发布

阅读量822

点赞数

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/25191129

版权

jQuery树

实现效果:页面分成左右两部分，左树右内容,树始终悬浮在页面固定位置,使用position:fixed实现，点击左侧树节点，右侧跳转到对应节点位置，利用a标签的锚点可以实现。

具体树的实现：我的想法是每个根节点为一个ul，然后要添加子节点则往li下面添加ul做成子节点。

效果预览:

实现源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑;}
	.test{width:100%;height:1000px;}
	.left{width:20%;height:400px;float:left;border:1px solid #FF0000;margin-right:20px;position:fixed;}
	.left li ul{position:relative;left:20px;list-style:none;}
	.right{float:right;border:1px solid #FF0000;width:76%;}
	a{ text-decoration:none;}
	.line{height:600px;border:1px solid #3399CC;}
	.sub{height:200px;border:1px solid #FF0000;width:90%;margin-left:30px;}
</style>
<script type="text/javascript" src="../../jQuery1.7.2/jquery-1.7.2.js"></script>
</head>
<script type="text/javascript">
	jQuery(document).ready(function()
	{	
		var Class=
		{
			create:function()
			{
				return function()
				{
					this.initialize.apply(this,arguments);
				}
			}
		};
		var locationHref=Class.create();
		locationHref.prototype=
		{
			initialize:function(content,options)
			{
				this.content=$(content);
				var obj=this;
				this.treeData= 
				{
					items:[
					{"name":"中国","type":"a","href":"#a","parent":"0"},
					{"name":"韩国","type":"b","href":"#b","parent":"0"},
					{"name":"日本","type":"c","href":"#c","parent":"0"},
					{"name":"美国","type":"d","href":"#d","parent":"0"},
					{"name":"德国","type":"e","href":"#e","parent":"0"},
					{"name":"湖南","type":"f","href":"#f","parent":"a"},
					{"name":"深圳","type":"g","href":"#g","parent":"a"},
					{"name":"长沙","type":"h","href":"#h","parent":"f"},
					{"name":"岳阳","type":"i","href":"#i","parent":"f"},
					{"name":"娄底","type":"j","href":"#j","parent":"f"},
					{"name":"纽约","type":"k","href":"#k","parent":"d"},
					{"name":"华盛顿","type":"m","href":"#m","parent":"d"},
					{"name":"华尔街","type":"l","href":"#l","parent":"k"}
					]
				};
				this.rootUl=this.content.find("ul");
				this.dataInit(this.rootUl);
				//隐藏下级子菜单
				$(content+" > ul > li").find("ul").css("display","none");
				this.content.find("li").click(function()
				{
					obj.queryData($(this));
					return false;
				});
			},
			dataInit:function(currentUl) //左侧树节点初始化
			{
				for(var i=0,max=this.treeData.items.length;i<max;i++)
				{
					var data=this.treeData.items[i];
					if(parseInt(data.parent)==0) //根节点数据初始化
 					{
						var linkHref=data.href;
						currentUl.append("<li><img src='folder.gif'/><a href="+linkHref+"><span>"+data.name+"</span></a>"+
						"<input type='hidden' value="+data.type+"></li>");
					}
					else
					{
						this.addData(data);
					}
				}
			},
			setOptions:function() //参数设置
			{
			},
			deleteData:function(currentType) //删除数据,给定type值
			{
				var currentLi;
					allType=this.content.find("input");
				for(var i=0,max=allType.length;i<max;i++)
				{
					var currentInput=this.content.find("input:eq("+i+")");
					if(currentInput.val()==currentType)
					{
						currentLi=currentInput.parent("li");
						break;
					}
				}
				currentLi.empty();  //清空
				currentLi.remove(); //移除
			},
			addData:function(data) //子节点添加
			{
				var parentType=data.parent,
					parentLi;
				if(parseInt(data.parent)!=0) //表示不是根节点
				{
					for(var i=0,max=this.content.find("ul li").length;i<max;i++)
					{
						var currentLi=this.content.find("ul li:eq("+i+")");
						if(currentLi.find("input").val()==parentType)
						{
							parentLi=currentLi;
							break;
						}
					}	
				}	
				if(parentLi!=null && parentLi.find("ul").length==0)
				{
					parentLi.append("<ul></ul>");
				}
				var content="<li><img src='folder.gif'/><a href="+data.href+"><span>"+data.name+"</span>"+
							"</a><input type='hidden' value="+data.type+"></li>";
				if(parseInt(data.parent)!=0)
				{	
					parentLi.find("ul").append(content);
				}	
				else //如果是根节点
				{
					this.content.find(" > ul ").append(content);
				}
			},
			queryData:function(obj) //查询指定li下的数据
			{
				var currentUl=obj.find(" > ul");
				if(currentUl.css("display")=="none")
				{
					currentUl.stop(false,true).slideDown(200);
					obj.find(" > img").attr("src","folder-open.gif");
				}
				else
				{
					currentUl.stop(false,true).slideUp(200);
					obj.find(" > img").attr("src","folder.gif");
				}
				window.location.href=obj.find(" > a").attr("href");
			},
			queryAllData:function() //展开所有
			{
				this.content.find("li ul").stop(false,true).slideDown(200);
				this.content.find("li img").attr("src","folder-open.gif");
			},
			closeAllData:function()
			{
				this.content.find("li ul").stop(false,true).slideUp(200);
				this.content.find("li img").attr("src","folder.gif");
			}
		};
		var location=new locationHref("#left");
		var data={"name":"印度","type":"m","href":"#m","parent":"0"};
		location.addData(data);
		data={"name":"大阪","type":"n","href":"#n","parent":"c"};
		//添加子节点
		location.addData(data); //添加节点
		location.deleteData("i"); //删除节点
		$(".oper button").click(function()
		{
			var operContent=$(this).text();
			if(operContent=="展开全部")
			{	
				location.queryAllData();
				$(this).text("收起");
			}
			else
			{
				location.closeAllData();
				$(this).text("展开全部");
			}	
		});
	});
</script>
<body>
	<div class="test">
		<div class="left" id="left">
			<div class="oper"><button>展开全部</button></div>
			<ul></ul>
		</div>
		<div class="right">
			<div class="one line">
				<a href="#" name="a" >一、中国</a>
				<div class="sub line">
					<a href="#" name="f">1.1 湖南</a>
					<div class="sub line" style="height:50px; ">
						<a href="#" name="h">1.1.1 长沙</a>
					</div>
					<div class="sub line" style="height:50px; ">
						<a href="#" name="i">1.1.2 岳阳</a>
					</div>
					<div class="sub line" style="height:50px; ">
						<a href="#" name="j">1.1.3 娄底</a>
					</div>
				</div>
				<div class="sub line">
					<a href="#" name="g">1.2 深圳</a>
				</div>
			</div>
			<div class="two line">
				<a href="#" name="b" >二、韩国</a>
			</div>
			<div class="three line">
				<a href="#" name="c">三、日本</a>
			</div>
			<div class="four line">
				<a href="#" name="d">四、美国</a>
			</div>
			<div class="five line">
				<a href="#" name="e">五、德国</a>
			</div>
		</div>
	</div>
</body>
</html>