浏览 2869 次
锁定老帖子 主题:javascript 树
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-07-07
最后修改:2009-07-08
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>
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |