javascript 树形菜单

// Arrays for nodes and icons
var g_nodes			= new Array();
var icons			= new Array(6);

// Loads all icons that are used in the tree
function preloadIcons() {
	icons[0] = new Image();
	icons[0].src = "img/plus.gif";
	icons[1] = new Image();
	icons[1].src = "img/plusbottom.gif";
	icons[2] = new Image();
	icons[2].src = "img/minus.gif";
	icons[3] = new Image();
	icons[3].src = "img/minusbottom.gif";
	icons[4] = new Image();
	icons[4].src = "img/folder.gif";
	icons[5] = new Image();
	icons[5].src = "img/folderopen.gif";
}

// Create the tree
function createTree(arrName) {
	g_nodes = arrName;
	if (g_nodes.length > 0) {
		preloadIcons();
					
		document.write("<img src=\"img/base.gif\" align=\"absbottom\" alt=\"\" />SystemoverView<br />");
	
		var recursedNodes = new Array();
		
		addNode(0, g_nodes, recursedNodes);
	}
}

// Returns the position of a node in the array
function getArrayId(node, nodes) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==node) return i;
	}
}

// Checks if a node has any children
function hasChildNode(parentNode, nodes) {
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) return true;
	}
	return false;
}

// Checks if a node is the last sibling
function lastSibling (node, parentNode, nodes) {
	var lastChild = 0;
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode)
			lastChild = nodeValues[0];
	}
	if (lastChild==node) 
		return true;
	return false;
}

// Adds a new node to the tree
function addNode(parentNode, nodes, recursedNodes) {
	for (var i = 0; i < nodes.length; i++) {

		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) {
			
			var ls	= lastSibling(nodeValues[0], nodeValues[1], nodes);
			var hcn	= hasChildNode(nodeValues[0], nodes);
			
			// Write out line & empty icons
			for (g=0; g<recursedNodes.length; g++) {
				if (recursedNodes[g] == 1) document.write("<img src=\"img/line.gif\" align=\"absbottom\" alt=\"\" />");
				else  document.write("<img src=\"img/empty.gif\" align=\"absbottom\" alt=\"\" />");
			}

			// put in array line & empty icons
			if (ls) recursedNodes.push(0);
			else recursedNodes.push(1);

			// Write out join icons
			if (hcn) {
				if (ls) {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
					document.write("plus");
					document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				} else {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
					document.write("plus");
					document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				}
			} else {
				if (ls) document.write("<img src=\"img/joinbottom.gif\" align=\"absbottom\" alt=\"\" />");
				else document.write("<img src=\"img/join.gif\" align=\"absbottom\" alt=\"\" />");
			}

			// Start link
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
			
			// Write out folder & page icons
			if (hcn) {
				document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"img/folder")
				document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />");
			} else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"img/page.gif\" align=\"absbottom\" alt=\"Page\" />");
			
			// Write out node name
			document.write(nodeValues[2]);

			// End link
			document.write("</a><br />");
			
			// If node has children write out divs and go deeper
			if (hcn) {
				document.write("<div id=\"div" + nodeValues[0] + "\"");
				document.write(" style=\"display: none;\"");
				document.write(">");
				addNode(nodeValues[0], nodes, recursedNodes);
				document.write("</div>");
			}
			
			// remove last line or empty icon 
			recursedNodes.pop();
		}
	}
}

// Opens or closes a node
function oc(node, bottom) {
	var theDiv = document.getElementById("div" + node);
	var theJoin	= document.getElementById("join" + node);
	var theIcon = document.getElementById("icon" + node);
	
	if (theDiv.style.display == 'none') {
		if (bottom==1) theJoin.src = icons[3].src;
		else theJoin.src = icons[2].src;
		theIcon.src = icons[5].src;
		theDiv.style.display = '';
	} else {
		if (bottom==1) theJoin.src = icons[1].src;
		else theJoin.src = icons[0].src;
		theIcon.src = icons[4].src;
		theDiv.style.display = 'none';
	}
}

// Push and pop not implemented in IE
if(!Array.prototype.push) {
	function array_push() {
		for(var i=0;i<arguments.length;i++)
			this[this.length]=arguments[i];
		return this.length;
	}
	Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
	function array_pop(){
		lastElement = this[this.length-1];
		this.length = Math.max(this.length-1,0);
		return lastElement;
	}
	Array.prototype.pop = array_pop;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>destroydrop » JavaScripts » Tree</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="StyleSheet" href="tree.css" type="text/css">
	<script type="text/javascript" src="tree.js"></script>
	<script type="text/javascript">
		var Tree = new Array;
		// nodeId | parentNodeId | nodeName | nodeUrl
		Tree[0]  = "1|0|Page 1|#";
		Tree[1]	 = "2|0|Page 2|#";
		Tree[2]  = "3|1|Page 1.1|#";
		Tree[3]	 = "4|2|Page 2.1|#";
		Tree[4]  = "5|1|Page 1.2|#";
		Tree[5]	 = "6|2|Page 2.2|#";

	</script>
</head>

<body>
<div class="tree">
<script type="text/javascript">
	createTree(Tree);  // start the tree at node nr. 1
</script>
</div>
</body>
</html>