function Node(id, pid, name) { this.index; this.id = id; this.pid = pid; this.name = name; this.isLeaf = true; this.lastSibling = false; this.isClose = true; } function Tree() { // this.icon = { empty:" ", folder:"■", join:"┠", joinbottom:"┖", // line:"┃", page:"◇" // } this.icon = { empty:"<img src='img/empty.gif' />", folder:"img/folder.gif", folderopen:"img/folderopen.gif", plus:"img/plus.gif", plusbottom:"img/plusbottom.gif", minus:"img/minus.gif", minusbottom:"img/minusbottom.gif", join:"<img src='img/join.gif' />", joinbottom:"<img src='img/joinbottom.gif' />", line:"<img src='img/line.gif' />", page:"<img src='img/page.gif' />" }; this.root = null; this.nodes = []; this.indents = []; this.str = ""; } Tree.prototype.addNode = function(id, pid, name) { var len = this.nodes.length; this.nodes[len] = new Node(id, pid, name); this.nodes[len].index = len; } Tree.prototype.toString = function() { this.str = "<div class=\"dtree\">"; this.initRoot(); this.travel(this.root); this.str += "</div>"; window.clipboardData.setData("text", this.str); return this.str; } Tree.prototype.initRoot = function() { var i = 0; var pNode = this.nodes[i]; for(i=1; i<this.nodes.length; i++) if(this.nodes[i].id==pNode.pid) { pNode = this.nodes[i]; i = 1; continue; } if(i==this.nodes.length) this.root = pNode; } Tree.prototype.travel = function(pNode) { this.setLS(pNode); this.visit(pNode); if(!pNode.isLeaf) { if(pNode.isClose) this.str += "<div id=\"clip" + pNode.index + "\" class=\"clip\" style=\"display:none\" >"; else this.str += "<div id=\"clip" + pNode.index + "\" class=\"clip\" style=\"display:block\" >"; this.indents.push(pNode.lastSibling); for(var i=0; i<this.nodes.length; i++) { if(this.nodes[i].pid==pNode.id) this.travel(this.nodes[i]); } this.indents.pop(); this.str += "</div>"; } } Tree.prototype.visit = function(node) { if(this.root!=node && node.isClose) this.str += "<div id=\"doc" + node.index + "\" class=\"dTreeNode\" style=\"display:none\" >"; else this.str += "<div id=\"doc" + node.index + "\" class=\"dTreeNode\" style=\"display:block\" >"; for(var i=0; i<this.indents.length; i++) this.str += this.indents[i]?this.icon.empty:this.icon.line; if(node.isLeaf) { this.str += node.lastSibling?this.icon.joinbottom:this.icon.join; this.str += this.icon.page; } else { this.str += "<a href=\"javascript: d.o(" + node.index + ");\">" this.str += "<img id=\"join" + node.index + "\" src=\""; this.str += node.lastSibling?(node.isClose?this.icon.plusbottom:this.icon.minusbottom):(node.isClose?this.icon.plus:this.icon.minus); this.str += "\" />" this.str += "</a>" this.str += "<img id=\"folder" + node.index + "\" src=\"" + this.icon.folder + "\" />"; } this.str += node.name; this.str += "</div>"; } Tree.prototype.o = function(index) { var pNode = this.nodes[index]; document.getElementById("clip"+index).style.display = pNode.isClose?"block":"none"; document.getElementById("join"+index).src = pNode.isClose?this.icon.minusbottom:this.icon.plusbottom; document.getElementById("folder"+index).src = pNode.isClose?this.icon.folderopen:this.icon.folder; for(var i=0; i<this.nodes.length; i++) { if(this.nodes[i].pid==pNode.id) { document.getElementById("doc"+this.nodes[i].index).style.display = pNode.isClose?"block":"none"; } } pNode.isClose = !pNode.isClose; } Tree.prototype.setLS = function(node) { var lastNode; for(var i=0; i<this.nodes.length; i++) { if(this.nodes[i].pid == node.id) node.isLeaf = false; if(this.nodes[i].pid == node.pid) lastNode = this.nodes[i]; } if(lastNode == node) node.lastSibling = true; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="xtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new Tree();
d.addNode(0,-1,'My example tree');
d.addNode(1,0,'Node 1');
d.addNode(2,0,'Node 2');
d.addNode(3,1,'Node 1.1');
d.addNode(4,0,'Node 3');
d.addNode(5,3,'Node 1.1.1');
d.addNode(6,5,'Node 1.1.1.1');
d.addNode(7,0,'Node 4');
d.addNode(8,1,'Node 1.2');
d.addNode(9,0,'My Pictures');
d.addNode(10,9,'The trip to Iceland');
d.addNode(11,9,'Mom\'s birthday');
d.addNode(12,0,'Recycle Bin');
document.write(d);
//-->
</script>
</div>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>