论坛首页 → Web前端技术论坛 →

javascript 树

浏览 2865 次
锁定老帖子 主题：javascript 树
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • xshq
  • 等级: 一星会员
  • 性别:
  • 文章: 1
  • 积分: 110
  • 来自: 广州
   发表时间：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 &raquo; Javascripts &raquo; 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> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <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&#58;drop&#64;destroydrop&#46;com">&copy;2002-2003 Geir Landr&ouml;</a></p>

</body>

</html>

 
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics