数据库表的设计如下:(树状结构)
id  parents_id   current_id      name
1    0                1          电器
2    1                2          小电器
3    2                3          电灯
说明  parents_id的值为所属父类的id ,current_id为当前级别。 顶级父类的parents_id为0。
请问怎么读取出这张表,并且在jsp页面中以树形结构显示出来?问题解决一定给分,谢谢!!!

解决方案 »

  1.   

    <%@ page contentType="text/html;charset=gb2312"
    import="java.util.*,java.sql.*"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head>
    <title>类别目录树</title> <link rel="StyleSheet" href="css/dtree.css" type="text/css" />
    <script type="text/javascript" src="js/dtree.js"></script>
    </head>
                    <jsp:useBean id="con8" class="com.**.db.Sqldata"
    scope="page" /> <body leftmargin="26">
    <table align="center">
    <tr>
    <td>
    <%
    ResultSet rs = con8.executeQuery("select * from table");
    %> <div class="dtree"> <p>
     <a href="javascript: d.openAll();"> 全部展开</a> |
    <a href="javascript: d.closeAll();">全部关闭</a>
    </p> <script type="text/javascript">
    <!--
                    d = new dTree('d');
                    d.add(0,-1,'类别');
                    <%
                    while(rs.next()){
                      String classId=rs.getString("current_id");
                      String className=rs.getString("name");
                      String parents_id=rs.getString("parents_id");
                      out.println("d.add("+classId+","+parents_id+",'"+name+"','viewByClassId.jsp?classId="+current_id+"');");                }
                    %>
                    document.write(d); //-->
    </script> </div>
      </td></tr></table> </body></html>
      

  2.   

    可以使用递归的方法取得树结构,算法如下:
    第一步:取得第一层节点;
    第二步:循环递归每个父节点,得到各级节点的子节点,以下是我写的一个获取树结构的小例子,仅供参考
    public void getFirstLevelNode(){
    //这个你应该知道怎么写吧
    }
    //对每个节点进行递归取得子节点
    private void genCommonTree(HttpServletRequest request, List firstLevel,
    CmsUser user) {
    StringBuffer tree = new StringBuffer();
    if (firstLevel != null)
    for (int i = 0; i < firstLevel.size(); i++) {
    Channel c = (Channel) firstLevel.get(i);
    genNextLevel(c,tree,true,true,true);
    }
    request.setAttribute("tree", tree);
    }
    //递归取得子节点的方法private void genNextLevel(Channel root, StringBuffer tree, boolean disable,
    boolean showinput, boolean widthlink) {
    ChannelManager cm = (ChannelManager) getBean("channelManager");
    tree.append("<li id='" + root.getId() + "'>");
    // 有子节点
    if (cm.whetherCurrentNodeHaveChild(root)) {
    tree.append(Child_Close_Img_begin);
    tree.append(" onclick=\"showHide('" + root.getId() + "')\"");
    tree.append(Child_Close_Img_end);
    if (showinput) {
    tree.append("<input type=\"checkbox\" name=\"ids\" ");
    if (disable)
    tree.append(" disabled ");
    tree.append(" onClick=\"changeSelect('" + root.getId()
    + "',this)\" ");
    tree.append(" value=\"" + root.getId() + "\" />");
    }
    if (widthlink) {
    tree.append("<a href=\"#\" onclick=\"getFragments('"
    + root.getId() + "')\" >");
    } else {
    tree.append("<a href=\"#\">");
    }
    tree.append(root.getName());
    tree.append("</a>");
    tree.append("<ul>");
    List channels = cm.getChannelChildren(root.getId());
    for (int i = 0; i < channels.size(); i++) {
    Channel temp = (Channel) channels.get(i);
    genNextLevel(temp, tree, disable, showinput, widthlink);
    }
    tree.append("</ul>");
    } else {
    tree.append(ChildEst_Img);
    if (showinput) {
    tree.append("<input type=\"checkbox\" name=\"ids\" ");
    if (disable)
    tree.append(" disabled ");
    tree.append(" onClick=\"changeSelect('" + root.getId()
    + "',this)\" ");
    tree.append(" value=\"" + root.getId() + "\" />");
    }
    if (widthlink) {
    tree.append("<a href=\"#\" onclick=\"getFragments('"
    + root.getId() + "')\" >");
    } else {
    tree.append("<a href=\"#\">");
    }
    tree.append(root.getName());
    tree.append("</a>");
    }
    tree.append("</li>");
    }
      

  3.   

    function Node(id, pid, name, url, title, target, icon, iconOpen, open) { this.id = id; this.pid = pid; this.name = name; this.url = url; this.title = title; this.target = target; this.icon = icon; this.iconOpen = iconOpen; this._io = open || false; this._is = false; this._ls = false; this._hc = false; this._ai = 0; this._p;};// Tree objectfunction dTree(objName) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, useStatusText : false, closeSameLevel : false, inOrder : false } this.icon = { root : 'img/base.gif', folder : 'img/folder.gif', folderOpen : 'img/folderopen.gif', node : 'img/page.gif', empty : 'img/empty.gif', line : 'img/line.gif', join : 'img/join.gif', joinBottom : 'img/joinbottom.gif', plus : 'img/plus.gif', plusBottom : 'img/plusbottom.gif', minus : 'img/minus.gif', minusBottom : 'img/minusbottom.gif', nlPlus : 'img/nolines_plus.gif', nlMinus : 'img/nolines_minus.gif' }; this.obj = objName; this.aNodes = []; this.aIndent = []; this.root = new Node(-1); this.selectedNode = null; this.selectedFound = false; this.completed = false;};// Adds a new node to the node arraydTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) { this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);};// Open/close all nodesdTree.prototype.openAll = function() { this.oAll(true);};dTree.prototype.closeAll = function() { this.oAll(false);};// Outputs the tree to the pagedTree.prototype.toString = function() { var str = '<div class="dtree">\n'; if (document.getElementById) { if (this.config.useCookies) this.selectedNode = this.getSelected(); str += this.addNode(this.root); } else str += 'Browser not supported.'; str += '</div>'; if (!this.selectedFound) this.selectedNode = null; this.completed = true; return str;};// Creates the tree structuredTree.prototype.addNode = function(pNode) { var str = ''; var n=0; if (this.config.inOrder) n = pNode._ai; for (n; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == pNode.id) { var cn = this.aNodes[n]; cn._p = pNode; cn._ai = n; this.setCS(cn); if (!cn.target && this.config.target) cn.target = this.config.target; if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); if (!this.config.folderLinks && cn._hc) cn.url = null; if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { cn._is = true; this.selectedNode = n; this.selectedFound = true; } str += this.node(cn, n); if (cn._ls) break; } } return str;};// Creates the node icon, url and textdTree.prototype.node = function(node, nodeId) { var str = '<div class="dTreeNode">' + this.indent(node, nodeId); if (this.config.useIcons) { if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; if (this.root.id == node.pid) { node.icon = this.icon.root; node.iconOpen = this.icon.root; } str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />'; } if (node.url) { str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; if (node.title) str += ' title="' + node.title + '"'; if (node.target) str += ' target="' + node.target + '"'; if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" '; if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; str += '>'; } else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; str += node.name; if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; str += '</div>'; if (node._hc) { str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; str += this.addNode(node); str += '</div>'; } this.aIndent.pop(); return str;};// Adds the empty and line iconsdTree.prototype.indent = function(node, nodeId) { var str = ''; if (this.root.id != node.pid) { for (var n=0; n<this.aIndent.length; n++) str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />'; (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1); if (node._hc) { str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="'; if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus; else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) ); str += '" alt="" /></a>'; } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />'; } return str;};
      

  4.   

    function Node(id, pid, name, url, title, target, icon, iconOpen, open) { this.id = id; this.pid = pid; this.name = name; this.url = url; this.title = title; this.target = target; this.icon = icon; this.iconOpen = iconOpen; this._io = open || false; this._is = false; this._ls = false; this._hc = false; this._ai = 0; this._p;};// Tree objectfunction dTree(objName) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, useStatusText : false, closeSameLevel : false, inOrder : false } this.icon = { root : 'img/base.gif', folder : 'img/folder.gif', folderOpen : 'img/folderopen.gif', node : 'img/page.gif', empty : 'img/empty.gif', line : 'img/line.gif', join : 'img/join.gif', joinBottom : 'img/joinbottom.gif', plus : 'img/plus.gif', plusBottom : 'img/plusbottom.gif', minus : 'img/minus.gif', minusBottom : 'img/minusbottom.gif', nlPlus : 'img/nolines_plus.gif', nlMinus : 'img/nolines_minus.gif' }; this.obj = objName; this.aNodes = []; this.aIndent = []; this.root = new Node(-1); this.selectedNode = null; this.selectedFound = false; this.completed = false;};// Adds a new node to the node arraydTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) { this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);};// Open/close all nodesdTree.prototype.openAll = function() { this.oAll(true);};dTree.prototype.closeAll = function() { this.oAll(false);};// Outputs the tree to the pagedTree.prototype.toString = function() { var str = '<div class="dtree">\n'; if (document.getElementById) { if (this.config.useCookies) this.selectedNode = this.getSelected(); str += this.addNode(this.root); } else str += 'Browser not supported.'; str += '</div>'; if (!this.selectedFound) this.selectedNode = null; this.completed = true; return str;};// Creates the tree structuredTree.prototype.addNode = function(pNode) { var str = ''; var n=0; if (this.config.inOrder) n = pNode._ai; for (n; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == pNode.id) { var cn = this.aNodes[n]; cn._p = pNode; cn._ai = n; this.setCS(cn); if (!cn.target && this.config.target) cn.target = this.config.target; if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); if (!this.config.folderLinks && cn._hc) cn.url = null; if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { cn._is = true; this.selectedNode = n; this.selectedFound = true; } str += this.node(cn, n); if (cn._ls) break; } } return str;};// Creates the node icon, url and textdTree.prototype.node = function(node, nodeId) { var str = '<div class="dTreeNode">' + this.indent(node, nodeId); if (this.config.useIcons) { if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; if (this.root.id == node.pid) { node.icon = this.icon.root; node.iconOpen = this.icon.root; } str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />'; } if (node.url) { str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; if (node.title) str += ' title="' + node.title + '"'; if (node.target) str += ' target="' + node.target + '"'; if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" '; if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; str += '>'; } else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; str += node.name; if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; str += '</div>'; if (node._hc) { str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; str += this.addNode(node); str += '</div>'; } this.aIndent.pop(); return str;};// Adds the empty and line iconsdTree.prototype.indent = function(node, nodeId) { var str = ''; if (this.root.id != node.pid) { for (var n=0; n<this.aIndent.length; n++) str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />'; (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1); if (node._hc) { str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="'; if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus; else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) ); str += '" alt="" /></a>'; } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />'; } return str;};