我现在需要一个jsp动态树的原代码,这是一个jsp+js+xml实现的树形,需要在数据库中读取数据。就像是CSDN的那棵树。最好有对树节点的增删,对树的操作要与数据库同步。还有节点链接相应页面。高效就跟好了。
分不够可以加!加多少说个数!
email:[email protected]

解决方案 »

  1.   

    <!-- Tree.jsp -->
    <%@ page contentType ="text/html;charset=gb2312" %>
    <%@ page import="java.util.*;" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <BODY>
    <iframe width="100%" height="100" id="hiddenframe"></iframe>
    <script>
    function ExpandNode(ParentNode,ParentId){
    var NodeX = eval(ParentNode.id + '_0');
    if (NodeX.style.display == 'none')
     {
      NodeX.style.display="block";
      if (NodeX.loaded == 'no')
         {
          document.frames['hiddenframe'].location.replace("subtree.jsp?PID=" + ParentId + "&PNode=" + ParentNode.id);
          NodeX.loaded = 'yes';
        }
     }
    else
     {
      NodeX.style.display='none';
     }
    }
    </script>
    <CENTER>
    <TABLE border="1" width="20%" height="60%">
    <TR>
    <TD>
    <DIV style="OVERFLOW: auto;WIDTH: 100%;HEIGHT: 100%">
    <TABLE width="300%">
    <TR>
    <TD>
    <%
     java.lang.Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
    //  java.sql.Connection ConnectionX = java.sql.DriverManager.getConnection("jdbc:ODBC:driver={Microsoft Access Driver (*.mdb)};DBQ=D:\\Resin\\doc\\examples\\Tree\\tree.mdb","admin", "");
    //  java.sql.Statement StatementX = ConnectionX.createStatement();
     java.sql.ResultSet ResultSetX = java.sql.DriverManager.getConnection("jdbc:ODBC:driver={Microsoft Access Driver (*.mdb)};DBQ=e:\\resin-2.1.6\\doc\\examples\\Tree\\tree.mdb","admin", "").createStatement().executeQuery("select *,(select count(*) from tree where parentid = T.id) as children from tree T where parentid = 0");
     int i=0;
     int children;
     int ID;
     while (ResultSetX.next())
           {
    children=ResultSetX.getInt("children");
    ID=ResultSetX.getInt("id");
    %>
    <div id='Node_<%= i %>'><a href='#'
            <% if (children >0)
                  {%>
                     onClick='ExpandNode(Node_<%= i %>,<%=ID %>)'>+</a>
                  <%;}
                else {%>
                    >-</a><%;}%>
            <a href='#'
            <% if (children >0)
                    {%>
                        onDblClick='ExpandNode(Node_<%= i %>,<%=ID%>)'
                    <%}  %>  
                    >
                    <%=ResultSetX.getString("re")%></a>
    </div>
            
    <div id='Node_<%= i %>_0' style='display: none' loaded='no'>
            &nbsp;&nbsp;正在加载 ...
       </div>
     <%
     i++;
     }
     %>
    </BODY>
    </HTML> <!-- SubTree.jsp -->
    <%@ page contentType ="text/html;charset=gb2312" %>
    <%@ page import="java.util.*;" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <%
    String ParentNode = request.getParameter("PNode");
    int i;
    int j;
    String nSpace="";
    j= ParentNode.length()- ParentNode.replaceAll("_","").length();
    for (i=0;i<j;i++)
       nSpace = nSpace + "&nbsp;&nbsp;";
    String sHTML ="";
    i=0; java.lang.Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
    //  java.sql.Connection ConnectionX = java.sql.DriverManager.getConnection("jdbc:ODBC:driver={Microsoft Access Driver (*.mdb)};DBQ=D:\\Resin\\doc\\examples\\Tree\\tree.mdb","admin", "");
    //  java.sql.Statement StatementX = ConnectionX.createStatement();
     java.sql.ResultSet ResultSetX = java.sql.DriverManager.getConnection("jdbc:ODBC:driver={Microsoft Access Driver (*.mdb)};DBQ=e:\\resin-2.1.6\\doc\\examples\\Tree\\tree.mdb","admin", "").createStatement().executeQuery("select *,(select count(*) from tree where parentid =T.id ) as Children from tree T where parentid = " + request.getParameter("PID"));
     int children;
     int ID;
     while (ResultSetX.next())
     {    children=ResultSetX.getInt("children");
          ID=ResultSetX.getInt("id");
          sHTML = sHTML + "<div id='" + ParentNode + "_" + (i + 1) + "'>" + nSpace + "<a href='#'";
      if (children >0)
         sHTML = sHTML + " onClick='ExpandNode(" + ParentNode + "_" + (i + 1) + "," + ID + ")'>+";
      else sHTML = sHTML + ">-";
          sHTML = sHTML + "</a>\\n" + "<a href='#'";
      if (children >0)
         sHTML = sHTML + " onDblClick='ExpandNode(" + ParentNode + "_" + (i + 1) + "," + ID + ")'";
      sHTML = sHTML + ">" + ID + ": " + ResultSetX.getString("re") + "</a></div>";
      if (children >0)
         sHTML = sHTML + "<div id='" + ParentNode + "_" + (i + 1) + "_0' style='display: none' loaded='no'>" + nSpace + "&nbsp;&nbsp;正在加载 ...</div>";
     %>
     <% i++;
        }%>
    <BODY>
    <script>
       var x = eval('parent.' + '<%= ParentNode + "_0"%>' ) ;
       x.innerHTML="<%= sHTML %>";
    </script>
    </BODY>
    </HTML>
      

  2.   

    非常感谢,我需要的是一个xml+js得树。
      

  3.   

    /* JavaScript Document */xmlTree v1.2
    =================================Infomation
    ----------------------
    Author   : Lapuasi
    E-Mail   : [email protected]
    WebSite  : http://www.lapuasi.com/javascript
    DateTime : 2005-12-25
    Example
    ----------------------
    var tree = new xmlTree('tree'); //生成对象
    tree.mode = 1; //设置初始模式,默认全部关闭。0全部关闭,1全部展开
    tree.createTree(); //输出树
    for Internet Explorer, Mozilla Firefox
    */
    function xmlTree(name) {
    this.name         = name;                   //实例名称
    this.xmlFile      = 'xmltree.xml';          //默认xml文件
    this.iconPath     = 'images/'               //默认图标路径
    this.iconFolder   = 'tree_icon_folder.gif'; //默认文件夹图标
    this.iconFile     = 'tree_icon_file.gif';   //默认文件图标
    this.iconOpen     = 'tree_arrow_open.gif';  //默认箭头展开图标
    this.iconOver     = 'tree_arrow_over.gif';  //默认箭头活动图标
    this.iconClose    = 'tree_arrow_close.gif'; //默认箭头关闭图标
    this.mode         = 0;                      //初始模式,默认全部关闭。0全部关闭,1全部展开
    this.html         = '';                     //最终输出html代码
    this.prevTip      = null;                   //上一次被显示的tip的时间编号 (内部使用)
    this.prevSelected = null;                   //上一次被选中的节点的自动编号 (内部使用)
    }xmlTree.prototype.createXMLDOM = function() { //生成XMLDOM对象
    var xmldom;
    if (window.ActiveXObject){
    var xmldom = new ActiveXObject("Microsoft.XMLDOM");
    } else {
    if (document.implementation && document.implementation.createDocument) {
    var xmldom = document.implementation.createDocument("","doc",null);
    }
    }
    xmldom.async = false;
    xmldom.resolveExternals = false;
    xmldom.validateOnParse = false;
    xmldom.preserveWhiteSpace = true;
    return xmldom;
    }xmlTree.prototype.createTree = function() { //生成并打印
    var xmldom = this.createXMLDOM();
    document.write('<div id="tree"><\/div>'); // 树所用层
    document.write('<div id="treeTip"><\/div>'); //提示所用层
    document.getElementById('treeTip').style.visibility = 'visible';
    document.getElementById('treeTip').style.display = 'none';
    if (xmldom.load(this.xmlFile)) {
    this.createNodes(xmldom);
    } else {
    this.html = 'Load XML Error';
    }
    document.getElementById('tree').innerHTML = this.html;
    return;
    }xmlTree.prototype.getFirstChildData = function(obj, name) { //取得指定名称节点的第一个子节点的数据
    var result = '';
    if (typeof(obj) == 'object' && name != null && name != '') {
    var node = obj.getElementsByTagName(name);
    if (node != null && node.length > 0) {
    result = node[0].firstChild.data;
    }
    }
    return result;
    }xmlTree.prototype.checkChildNodes = function(obj, id) { //检测是否有分支
    var result = false;
    var nodes = obj.getElementsByTagName('node');
    if (nodes != null && nodes.length > 0) {
    //var pid;
    for (var i = 0; i < nodes.length; i++) {
    //pid = nodes[i].getAttribute('parentid');
    if (nodes[i].getAttribute('parentid') == id) {
    result = true;
    break;
    }
    }
    }
    return result;
    }xmlTree.prototype.createNodes = function(obj, id) { //生成指定编号节点的树
    if (typeof(id) == 'undefined') id = null; //如果没有id传入则为根节点
    var nodes = obj.getElementsByTagName('node');
    if (nodes != null && nodes.length > 0) {
    var modeClass, modeSrc, iconClass, iconSrc;
    var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;

    //判断模式类型,并应用样式
    modeClass = 'close';
    modeSrc = this.iconPath + this.iconClose;
    if (this.mode == 1) {
    modeSrc = this.iconPath + this.iconOpen;
    modeClass = 'open';
    }
    if (id == null) modeClass = 'open'; //若为根节点则显示
    this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">'; for (var i = 0; i < nodes.length; i++) {
    npid = nodes[i].getAttribute('parentid');
    if (npid == id) {
    //初始化
    modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile; //取得节点编号并检测
    nid = nodes[i].getAttribute('id');
    this.html += '<li id="tree_' + nid + '"><span onclick="' + this.name + '.action(this,event);" onmouseover="' + this.name + '.action(this,event);" onmouseout="' + this.name + '.action(this,event);">';

    //取得节点自定义图标
    //判断是否含有子节点,并确定箭头和图标的图片及样式
    nicon = this.getFirstChildData(nodes[i], 'icon');
    hasChildNodes = this.checkChildNodes(obj, nid);
    if (hasChildNodes) {
    iconClass = '';
    iconSrc = this.iconPath + this.iconFolder;
    this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //箭头
    }
    if (nicon != '') iconSrc = nicon;
    this.html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //图标 //取得节点连接
    nlink = this.getFirstChildData(nodes[i], 'link');
    if (nlink != '') {
    nlink = ' href="' + nlink + '"';
    } else {
    nlink = ' href="javascript:;"';
    } //取得节点目标
    ntarget = this.getFirstChildData(nodes[i], 'target');
    if (ntarget != '') {
    ntarget = ' target="' + ntarget + '"';
    } //取得节点说明
    nexplain = this.getFirstChildData(nodes[i], 'explain');
    if (nexplain != '') {
    nexplain = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"'
    } //取得节点名称
    nname = this.getFirstChildData(nodes[i], 'name');
    this.html += '<a id="tree_' + nid + '_l" onclick="' + this.name + '.action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>'; //obj.documentElement.removeChild(nodes[i]);
    if (hasChildNodes) this.createNodes(obj, nid); //迭代子节点 this.html += '<\/li>';
    }
    }
    this.html += '<\/ul>';
    }
    return;
    }xmlTree.prototype.action = function(obj, e) { //节点操作
    e = e ? e : (window.event ? window.event : null); //获取操作类型
    e = e.type;
    if (obj.tagName == 'A') {
    try { this.prevSelected.className = '';}
    catch(e) {}
    this.prevSelected = obj;
    obj.className = 'selected';
    }
    if (obj.tagName == 'SPAN') {
    var arrow = obj.firstChild; //取得箭头对象
    var borther = obj;
    while (borther.tagName != 'UL') { //取得分支对象
    borther = borther.nextSibling;
    if (borther == null) break;
    }
    if (borther != null) {
    switch (e) { //检测操作类型并执行相应代码
    case 'click':
    if (borther.className == 'open') {
    borther.className = 'close';
    arrow.src = this.iconPath + this.iconClose;
    } else {
    borther.className = 'open';
    arrow.src = this.iconPath + this.iconOpen;
    }
    break;
    case 'mouseover':
    if (arrow.tagName == 'IMG' && borther.className == 'close') {
    arrow.src = this.iconPath + this.iconOver;
    }
    break;
    case 'mouseout':
    if (arrow.tagName == 'IMG' && borther.className == 'close') {
    arrow.src = this.iconPath + this.iconClose;
    }
    break;
    }
    }
    }
    return;
    }xmlTree.prototype.treeTips = function(msg) { //提示栏
    if (this.prevTip != null) clearTimeout(this.prevTip);
    var obj = document.getElementById('treeTip');
    if (obj != null) {
    if (this.treeTips.arguments.length < 1) { // hide
    obj.style.display = 'none';
    } else { // show
    obj.innerHTML = msg;
    this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300);
    document.onmousemove = this.moveToMouseLoc;
    }
    }
    return;
    }xmlTree.prototype.moveToMouseLoc = function(e) { //移动到鼠标所在位置
    var obj = document.getElementById('treeTip');
    if (obj != null) {
    var offsetX = -10, offsetY = 20;
    var x = 0, y = 0;
    if (window.event) {
    x = event.x + document.body.scrollLeft;
    y = event.y + document.body.scrollTop;
    } else {
    x = e.pageX;
    y = e.pageY;
    }
    obj.style.left = x + offsetX + 'px';
    obj.style.top = y + offsetY + 'px';
    }
    return;
    }
      

  4.   

    xml 数据:
    ----<?xml version="1.0" encoding="utf-8"?><!--
    CODE BY Lapuasi.com [2005-12-14]Explain:
    ===================================================
    node 为树的一个节点,具有以下属性和内容
    属性
    id: 编号,如果不唯一,只取第一个,其余被忽略 (必须, 可以是任意字符组合)
    parentid: 父编号,没有则为父节点 (可选, 可以是任意字符组合)
    内容
    name: 名称 (必须)
    link: 连接 (可选)
    target: 目标 (可选)
    icon: 图标 (可选)
    explain: 说明 (可选)
    --><root>
    <node id="n1">
    <name>我的电脑</name>
    <icon>images/tree_icon_computer.gif</icon>
    <explain>显示连接到此计算机的驱动器和硬件</explain>
    </node>
    <node id="2" parentid="n1">
    <name>硬盘驱动器 (C:)</name>
    <icon>images/tree_icon_driver.gif</icon>
    </node>
    <node id="3">
    <name>网上邻居</name>
    <icon>images/tree_icon_net.gif</icon>
    <explain>显示到网站,网络计算机和FTP站点的快捷方式</explain>
    </node>
    <node id="4" parentid="n1">
    <name>硬盘驱动器 (D:)</name>
    <icon>images/tree_icon_driver.gif</icon>
    </node>
    <node id="5" parentid="2">
    <name>Windows</name>
    </node>
    <node id="6" parentid="3">
    <name>menu6</name>
    </node>
    <node id="7" parentid="3">
    <name>menu7</name>
    </node>
    <node id="8" parentid="3">
    <name>menu8</name>
    </node>
    <node id="9" parentid="7">
    <name>menu9</name>
    </node>
    <node id="10">
    <name>回收站</name>
    <icon>images/tree_icon_recycler.gif</icon>
    <explain>包含您已经删除的文件和文件夹</explain>
    </node>
    <node id="11" parentid="5">
    <name>system32</name>
    </node>
    <node id="12" parentid="11">
    <name>system.dll</name>
    <link>http://www.lapuasi.com</link>
    <target>_blank</target>
    </node>
    <node id="13" parentid="7">
    <name>menu13</name>
    </node>
    <node id="14" parentid="n1">
    <name>DVD 驱动器</name>
    <icon>images/tree_icon_cdrom.gif</icon>
    </node>
    </root>
    ----使用方法:
    var tree = new xmlTree('tree'); //生成对象
    tree.mode = 1; //设置初始模式,默认全部关闭。0全部关闭,1全部展开
    tree.createTree(); //输出树
      

  5.   

    太感谢了。我这些操作都是要根据数据库同步的,如果有发到我email:[email protected],或者加我MSN:[email protected]
    直接告诉我,都会直接给分。
      

  6.   

    http://hi.baidu.com/lael80/blog/item/cc2d07304707c399a9018e5e.html