下面有三个文件,稍作修改就可以了: tree.jsp: <%//get data from datebase and stored them in an array Tree[][]=XXXbean.getData(); %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="StyleSheet" type="text/css" href="tree.css" >
<script type="text/javascript" src="tree.js"></script> <script type="text/javascript" language=JavaScript> var Tree = new Array; // nodeId | parentNodeId | nodeName | nodeUrl <%for (int i=0; i<tree.length; i++){%> Tree[<%=i%>] = new Array; <%for (int j=0; j<tree[0].length; j++){%> Tree[<%=i%>][<%=j%>] = "<%=tree[i][j]%>"; <% } }
%> </script> </head> <body> <table border="0" width="206" cellpadding="2"> <tr> <td width=206> <div id="tree" > <script type="text/javascript"> <!-- createTree(Tree,1,1); // starts the tree at the top and open it //--> </script> </div> </td> </tr> </table> </body>tree.js: /************************************************************************** Copyright (c) 2001 Geir Landrö ([email protected]) JavaScript Tree - www.destroydrop.com/hugi/javascript/tree/ Version 0.96 This script can be used freely as long as all copyright messages are intact. **************************************************************************/// Arrays for nodes and icons var nodes = new Array();; var openNodes = 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, startNode, openNode) { nodes = arrName; if (nodes.length > 0) { preloadIcons(); if (startNode == null) startNode = 0; if (openNode != 0 || openNode != null) setOpenNodes(openNode);
var recursedNodes = new Array(); addNode(startNode, recursedNodes); } } // Returns the position of a node in the array function getArrayId(node) { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[0]==node) return i; } } // Puts in array nodes that will be open function setOpenNodes(openNode) { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[0]==openNode) { openNodes.push(nodeValues[0]); setOpenNodes(nodeValues[1]); } } } // Checks if a node is open function isNodeOpen(node) { for (i=0; i<openNodes.length; i++) if (openNodes[i]==node) return true; return false; } // Checks if a node has any children function hasChildNode(parentNode) { 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) { 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 in the tree function addNode(parentNode, 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]); var hcn = hasChildNode(nodeValues[0]); var ino = isNodeOpen(nodeValues[0]); // 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/"); if (ino) document.write("minus"); else 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/"); if (ino) document.write("minus"); else document.write("plus"); document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>"); } } else { if (ls) document.write("<img src=\"img/join.gif\" align=\"absbottom\" alt=\"\" />"); else document.write("<img src=\"img/joinbottom.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 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] + "\""); if (!ino) document.write(" style=\"display: none;\""); document.write(">"); addNode(nodeValues[0], 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);
tree.jsp:
<%//get data from datebase and stored them in an array
Tree[][]=XXXbean.getData();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" type="text/css" href="tree.css" >
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript" language=JavaScript> var Tree = new Array;
// nodeId | parentNodeId | nodeName | nodeUrl
<%for (int i=0; i<tree.length; i++){%>
Tree[<%=i%>] = new Array;
<%for (int j=0; j<tree[0].length; j++){%>
Tree[<%=i%>][<%=j%>] = "<%=tree[i][j]%>";
<%
}
}
%>
</script>
</head>
<body>
<table border="0" width="206" cellpadding="2">
<tr>
<td width=206>
<div id="tree" >
<script type="text/javascript">
<!--
createTree(Tree,1,1); // starts the tree at the top and open it
//-->
</script>
</div>
</td>
</tr>
</table>
</body>tree.js:
/**************************************************************************
Copyright (c) 2001 Geir Landrö ([email protected])
JavaScript Tree - www.destroydrop.com/hugi/javascript/tree/
Version 0.96 This script can be used freely as long as all copyright messages are
intact.
**************************************************************************/// Arrays for nodes and icons
var nodes = new Array();;
var openNodes = 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, startNode, openNode) {
nodes = arrName;
if (nodes.length > 0) {
preloadIcons();
if (startNode == null) startNode = 0;
if (openNode != 0 || openNode != null) setOpenNodes(openNode);
if (startNode !=0) {
var nodeValues = nodes[getArrayId(startNode)].split("|");
document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"img/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
} else document.write("<img src=\"img/base.gif\" align=\"absbottom\" alt=\"\" />Website<br />");
var recursedNodes = new Array();
addNode(startNode, recursedNodes);
}
}
// Returns the position of a node in the array
function getArrayId(node) {
for (i=0; i<nodes.length; i++) {
var nodeValues = nodes[i].split("|");
if (nodeValues[0]==node) return i;
}
}
// Puts in array nodes that will be open
function setOpenNodes(openNode) {
for (i=0; i<nodes.length; i++) {
var nodeValues = nodes[i].split("|");
if (nodeValues[0]==openNode) {
openNodes.push(nodeValues[0]);
setOpenNodes(nodeValues[1]);
}
}
}
// Checks if a node is open
function isNodeOpen(node) {
for (i=0; i<openNodes.length; i++)
if (openNodes[i]==node) return true;
return false;
}
// Checks if a node has any children
function hasChildNode(parentNode) {
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) {
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 in the tree
function addNode(parentNode, 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]);
var hcn = hasChildNode(nodeValues[0]);
var ino = isNodeOpen(nodeValues[0]); // 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/");
if (ino) document.write("minus");
else 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/");
if (ino) document.write("minus");
else document.write("plus");
document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
}
} else {
if (ls) document.write("<img src=\"img/join.gif\" align=\"absbottom\" alt=\"\" />");
else document.write("<img src=\"img/joinbottom.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")
if (ino) document.write("open");
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] + "\"");
if (!ino) document.write(" style=\"display: none;\"");
document.write(">");
addNode(nodeValues[0], 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(crap! don´t know about NS though)
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;
}tree.css:
#tree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#tree a {
color: #000;
text-decoration: none;
}
#tree img {
border: 0px;
width: 19px;
height: 16px;
}
数据是以什么顺序存入到数组中呢?请 owenyang(阿炳) 进一步指点小弟!
Tree[0][0] = "1";//根节点ID为1
Tree[0][1] = "0";//根节点的父节点ID为0
Tree[0][2] = "display name";//待显示的名称
Tree[0][3] = "URL";//URL
另外还有图片,如果你需要的话把email地址留下