`
ylz4647
  • 浏览: 50274 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

树型菜单Ajax动态载入

阅读更多

最近公司要求实现一个动态载入的树型菜单,第一次打开页面时载入第一层节点,点先第一层任意节点后用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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics