简单说明:
思路: 从数据岛menuXML中读取数据,从树的根节点开始分析树, 利用 hasChildNodes() [方法:是否含有子节点 ] 判断当前 节点是否有子节点,如果有子节点继续向下分析 childNodes [对象:子节点对象集合] ,否则返回当前分析结果(树结点对象)。
主要的函数: createTree(thisn /*树结点*/ , sd/*树深度*/)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> DSTree </TITLE> <META NAME="Author" CONTENT="sTarsjz@hotmail.com" > <style> body,td{font:12px verdana} #treeBox{background-color:#fffffa;} #treeBox .ec{margin:0 5 0 5;} #treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;} #treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;} </style> <base href="http://vip.5d.cn/star/dstree/" /> <script> //code by star 20003-4-7 var HC = "color:#990000;border:1px solid #cccccc"; var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;"; var IO = null; function initTree(){ var rootn = document.all.menuXML.documentElement; var sd = 0; document.onselectstart = function(){return false;} document.all.treeBox.appendChi ld(createTree(rootn,sd)); } function createTree(thisn,sd){ var nodeObj = document.createElement("span"); var upobj = document.createElement("span"); with(upobj){ style.marginLeft = sd*10; className = thisn.hasChildNodes()?"hasItems":"Items"; innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +""; onmousedown = function(){ if(event.button != 1) return; if(this.getAttribute("cn")){ this.setAttribute("open",!this.getAttribute("open")); this.cn.style.display = this.getAttribute("open")?"inline":"none"; this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif"; } if(IO){ IO.runtimeStyle.cssText = ""; IO.setAttribute("selected",false); } IO = this; this.setAttribute("selected",t rue); this.runtimeStyle.cssText = SC; } onmouseover = function(){ if(this.getAttribute("selected "))return; this.runtimeStyle.cssText = HC; } onmouseout = function(){ if(this.getAttribute("selected "))return; this.runtimeStyle.cssText = ""; } oncontextmenu = contextMenuHandle; onclick = clickHandle; }
if(thisn.getAttribute("treeId" ) != null){ upobj.setAttribute("treeId",thisn.getAttribute("treeId")); } if(thisn.getAttribute("href") != null){ upobj.setAttribute("href",thisn.getAttribute("href")); } if(thisn.getAttribute("target" ) != null){ upobj.setAttribute("target",thisn.getAttribute("target")); }
nodeObj.appendChild(upobj); nodeObj.insertAdjacentHTML("be foreEnd","<br>")
if(thisn.hasChildNodes()){ var i; var nodes = thisn.childNodes; var cn = document.createElement("span"); upobj.setAttribute("cn",cn); if(thisn.getAttribute("open") != null){ upobj.setAttribute("open",(thi sn.getAttribute("open")=="true")); upobj.getAttribute("cn").style .display = upobj.getAttribute("open")?"inline":"none"; if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif"; } for(i=0;i<nodes.length;cn.appendChild(createTree(nodes [i++],sd+1))); nodeObj.appendChild(cn); } else{ upobj.all.tags("img")[0].src ="endnode.gif"; } return nodeObj; } window.onload = initTree; </script>
<script> function clickHandle(){ // your code here } function contextMenuHandle(){ event.returnValue = false; var treeId = this.getAttribute("treeId"); // your code here } </script> </HEAD> <BODY> <xml id=menuXML> <?xml version="1.0" encoding="GB2312"?> <DSTreeRoot text="根节点" open="true" href="http://" treeId="123"> <DSTree text="技术论坛" open="false" treeId=""> <DSTree text="5DMedia" open="false" href="http://" target="box" treeId="12"> <DSTree text="网页编码" href="http://" target="box" treeId="4353" /> <DSTree text="手绘" href="http://" target="box" treeId="543543" /> <DSTree text="灌水" href="http://" target="box" treeId="543543" /> </DSTree> <DSTree text="BlueIdea" open="false" href="http://" target="box" treeId="213"> <DSTree text="DreamWeaver & JS" href="http://" target="box" treeId="4353" /> <DSTree text="FlashActionScript" href="http://" target="box" treeId="543543" /> </DSTree> <DSTree text="CSDN" open="false" hr[1] [2] 下一页 |