你可以先从数据库中读出数据,用一个数组储存,然后写一个javascript函数,我这儿有源代码,不过需要修改一下.

解决方案 »

  1.   

    下面有三个文件,稍作修改就可以了:
    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&ouml; ([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&acute;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;
    }
      

  2.   

    致owenyang(阿炳):
         数据是以什么顺序存入到数组中呢?请 owenyang(阿炳) 进一步指点小弟!
      

  3.   

    数据以二维数组的形式,ID以1为单位依次增长.第二维有四个数据,分别是:节点的ID,节点的父节点的ID,节点在目录树中要显示的名字,链接的URL,其中根节点数据如下:
    Tree[0][0] = "1";//根节点ID为1
    Tree[0][1] = "0";//根节点的父节点ID为0
    Tree[0][2] = "display name";//待显示的名称
    Tree[0][3] = "URL";//URL
    另外还有图片,如果你需要的话把email地址留下
      

  4.   

    另外,http://www.destroydrop.com/javascripts/tree/有最原始的代码及图片,不过是全英文的,你有空可以去看看