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