树型菜单Ajax动态载入

最新推荐文章于 2021-08-06 08:58:31 发布

杰欧奕

最新推荐文章于 2021-08-06 08:58:31 发布

阅读量133

点赞数

分类专栏： Javascript 文章标签： Ajax JavaScript CSS HTML JSP ViewUI

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近公司要求实现一个动态载入的树型菜单,第一次打开页面时载入第一层节点,点先第一层任意节点后用Ajax去动态加载该节点下的子节点,在网上找来找去没有找到合适的,最后决定用一个做得不错的树菜单来改版,在没有灵感的情况下,折腾了几天总算弄出点样来,放上来请各位大虾指点一下..谢谢~~

原树模型请参考： http://www.destroydrop.com/javascripts/tree/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Example dTree</title>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
		<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
		<script type="text/javascript" src="js/emistree.js"></script>		
	</head>

	<body>
		<h2>
			Example
		</h2>
		<p>
			<a href="javascript: d.openAll();">open all</a> |
			<a href="javascript: d.closeAll();">close all</a>
		</p>
		<div id="myTree" class="dtree"></div>
		<script type="text/javascript">
		<!--
			var d = new dTree('d');
			
			var s=new Date().getTime();
			var d = new dTree('d');
			d.config.drawObj = document.getElementById('myTree');
			//d.config.folderLinks=false;
			d.config.useCookies=false;
			//d.config.useLines=false;
			d.config.url='data.jsp'
			d.config.target='right';
			
			d.add({id:'0',pid:'-1',name:'My example tree',hasChild:true });
			d.add({id:'1',pid:'0',name:'Node 1',hasChild:true });
			d.add({id:'2',pid:'0',name:'Node 2',hasChild:true });
			d.add({id:'3',pid:'0',name:'Node 3',hasChild:true });
			
			d.add({id:'4',pid:'1',name:'Node 1.1',url:'example01.html' });
			d.add({id:'5',pid:'1',name:'Node 1.2',url:'example01.html' });
			d.add({id:'6',pid:'1',name:'Node 1.3',hasChild:true });
			d.add({id:'7',pid:'6',name:'Node 1.3.1',url:'example01.html' });
			d.add({id:'8',pid:'6',name:'Node 1.3.2',url:'example01.html' });
			d.render();						
		//-->
		</script>
	</body>

</html>