xshq 发表于 2013-2-7 19:49:20

javascript 树

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 = new Node(id, pid, name);this.nodes.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;for(i=1; i<this.nodes.length; i++)if(this.nodes.id==pNode.pid) {pNode = this.nodes; 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\" >";elsethis.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.pid==pNode.id)this.travel(this.nodes);}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\" >";elsethis.str += "<div id=\"doc" + node.index + "\" class=\"dTreeNode\" style=\"display:block\" >";for(var i=0; i<this.indents.length; i++)this.str += this.indents?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;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.pid==pNode.id) {document.getElementById("doc"+this.nodes.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.pid == node.id)node.isLeaf = false;if(this.nodes.pid == node.pid)lastNode = this.nodes;}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> 
页: [1]
查看完整版本: javascript 树