<%@ page contentType="text/html; charset=gb2312" language="java"%>
<%@ page import = "java.sql.*"%>
<html>
<head>
<title>#.Admin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="./js/MzTreeView10.js"></script>
<style type="text/css">
    body, td
    {
      font-family: 宋体;
      font-size: 12px;
    }
    A:LINK, A:VISITED, A:ACTIVE, A:HOVER
    {
      color: #800080;
      font-size: 13px;
      padding-left: 3px;
      TEXT-DECORATION: NONE;
    }
    </style>
 <SCRIPT LANGUAGE="JavaScript">
    function getQuery(name)
    {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r!=null) return unescape(r[2]); return null;
    }
    function getObjectById(id)
    {
      if (typeof(id) != "string" || id == "") return null;
      if (document.all) return document.all(id);
      if (document.getElementById) return document.getElementById(id);
      try {return eval(id);} catch(e){ return null;}
    }
</script>
</head>
<body bgcolor="ffffff" text="#000000" ><SCRIPT LANGUAGE="JavaScript">
    <!--
    window.tree = new MzTreeView("tree");    tree.icons["property"] = "property.gif";
    tree.icons["css"] = "collection.gif";
    tree.icons["book"]  = "book.gif";
    tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片
    tree.setIconPath("./img/"); //可用相对路径<%
String sql = "select * from mytree";
Connection conn = null;
try{
conn = getConnection();
ResultSet rst = executeQuery(conn,sql);
while(rst.next()){
%>
<%
 String tree;
 tree="\n"+"tree.nodes[\""+rst.getInt("parentId")+"_"+rst.getInt("id")+"\"]=\"";
 tree  +="text:"+rst.getString("text")+";";
 tree  +="hint:"+rst.getString("hint")+";";
 tree +="data:"+rst.getString("data")+";";
 tree  +="url:"+rst.getString("url")+";";
 tree  +="target:"+rst.getString("target")+";";
 tree  +="method:"+rst.getString("method")+";";
 tree +="\"";
 out.println(tree);
}
%>
<%
      rst.close();
  rst = null;
      conn.close();
      conn = null;
}

catch(Exception ex){
out.println(ex.toString());
}
%>

   //tree.setURL(".jsp");
    //tree.setTarget("MzMain");
    document.write(tree.toString());
    //-->
    </SCRIPT>
 <table>
 <tr>
 <td>聚焦到<input id=focusId size=5>节点<input type=button value="聚集" onclick="tree.focus(getObjectById('focusId').value)"></td></tr>
        <tr><td><input type=button value="父层节点←" onclick="tree.upperNode()"></td></tr>
<tr><td><input type=button value="子层节点→" onclick="tree.lowerNode()"></td></tr>
        <tr><td><input type=button value="上一节点↑" onclick="tree.pervNode()"></td></tr>
<tr><td><input type=button value="下一节点↓" onclick="tree.nextNode()"></td></tr>        <tr><td><input type=button value=展开所有节点 onclick="tree.expandAll()"></td></tr>
</table>
</body>
</html>
<%!
public ResultSet executeQuery(Connection conn,String sql) throws SQLException {
ResultSet rs = null;
Statement stmt = null;
try {
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
} catch (SQLException ex) {
System.out.println("查询异常:" + ex.getMessage());
}
return rs;
}

public synchronized Connection getConnection() throws Exception {
String driverName="com.microsoft.jdbc.sqlserver.SQLServerDriver";
String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=books";
Driver driver = (Driver) Class.forName(driverName).newInstance();
Connection conn = DriverManager.getConnection(url, "niu","niu");
return conn;
}
%>

解决方案 »

  1.   

    我是从数据库里直接生成的,至于JS文件完全按大师的方法去做,
    我不知道在哪里加ONCLICK事件,可以给我发个邮件或者在这里贴些建议吗,
    以上代码我并没编译成BEAN,只是初次调试通后,再规范程序代码!
    我邮件[email protected]
    QQ26278273谢谢
      

  2.   

    另外我想在
    <td>聚焦到<input id=focusId size=5>节点<input type=button value="聚集" onclick="tree.focus(getObjectById('focusId').value)"></td></tr>
    能聚集到的是它的TEXT属性呵呵
    我正在研究
    最近刚看JAVASCRIPT
    让大家笑话了
      

  3.   

    不是源代码。
    因为tree是在客户端运行的,所以只需要网页源文件。
    就是IE右键查看源文件看到的内容。
      

  4.   

    大师,昨天下午我上不了网络,直到现在才能上。
    客户端的代码就是上面的代码,都在一起的!大师博客有这样代码
    tree.nodes["2_154"] = "text:检测单位;ctrl:true;ctrlName:sc;"
    那我的代码应该是………………
    tree  +="method:"+rst.getString("method")+";";
    tree +="ctrl:trun;ctrlName:sc;";
    ……
    对吗
    我是直接从数据库里读出的,数据库没有的就直接读成字符串。大师的代码是
    tree.nodes["2_6"] = "text:其他客户;url:modicatalog.asp?cid=6;addicon: <a href=addcatalog.asp?pid=6><img src=../images/sysicos/105.gif width=16 height=16 title=增加下级 border=0></a>;delicon: <a href=# onclick=del(6)><img src=../images/sysicos/808.gif border=0 width=16 height=16 title=删除分类></a>;"
    那我的下面改如何写呢,不好意思!我不会写,我是想能直接点树中结点,就可以跳转到相应页面,有ONCLICK触发事件,怎么写呢,给些建议
    真麻烦大家了,我会把我所有的分都给支持我的个门们
      

  5.   

    就像大师写的原代码
    <html>
      <head>
        <script language=javascript>var t1 = new Date().getTime();</script>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <meta content="F.R.Huang(meizz梅花雪)//www.meizz.com" name="author">
        <script language="JavaScript" src="MzTreeView10.js"></script>
        <title>梅花雪中文网 - WEB版块管理界面</title>
        <style type="text/css">
        body, td
        {
          font-family: 宋体;
          font-size: 12px;
        }
        A:LINK, A:VISITED, A:ACTIVE, A:HOVER
        {
          color: #800080;
          font-size: 13px;
          padding-left: 3px;
          TEXT-DECORATION: NONE;
        }
        </style>
        <SCRIPT LANGUAGE="JavaScript">
        function getQuery(name)
        {
          var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r!=null) return unescape(r[2]); return null;
        }
        function getObjectById(id)
        {
          if (typeof(id) != "string" || id == "") return null;
          if (document.all) return document.all(id);
          if (document.getElementById) return document.getElementById(id);
          try {return eval(id);} catch(e){ return null;}
        }
        
        </SCRIPT>
      
      
      <script>
    var mc = ",2,4";
    var sc = ",33,112";
    var mcA = mc.split(",");
    var scA = sc.split(",");
    var obj_mc = document.getElementsByName("mc");
    var obj_sc = document.getElementsByName("sc");
    for(i=0;i<obj_mc.length;i++)
    {
     for(n=0;n<mcA.length;n++)
     {
      if(obj_mc[i].value == mcA[n]) obj_mc[i].checked = true;
     }
    }
    for(i=0;i<obj_sc.length;i++)
    {
     for(n=0;n<scA.length;n++)
     {
      if(obj_sc[i].value == scA[n]) obj_sc[i].checked = true;
     }
    }
    </script>
      </head>  <body>
        <h3>梅花雪WEB脚本控件集 - MzTreeView 1.0 树 - 测试页面</h3>
        <form method="get" style="padding: 3; background-color: #B8D1F8; margin-bottom: 0">
          <fieldset>
            <legend>输入树节点参数信息</legend>
            树的总节点数:<input name="total" size='8' maxlength='8' value="1024">
            每节点的子节点数:<input name="childNodes" size='3' maxlength='3' value="10">
            <input type="submit" value="确定">
          </fieldset>
        </form>
        <table width="100%" border=0 cellspacing=3 bgcolor="#B8D1F8">
          <tr>
            <td bgcolor=white valign=top>
              <div id=treeviewarea style="background-color: "></div>
              <SCRIPT LANGUAGE="JavaScript">
              <!--
              var tree = new MzTreeView("tree");
              tree.setIconPath("./");tree.nodes["-1_1"] = "text:管理联系人分类"tree.nodes["1_2"] = "text:客户;url:modicatalog.asp?cid=2;addicon: <a href=addcatalog.asp?pid=2><img src=../images/sysicos/105.gif width=16 height=16 title=增加下级 border=0></a>;delicon: <a href=# onclick=del(2)><img src=../images/sysicos/808.gif border=0 width=16 height=16 title=删除分类></a>;"
        
    tree.nodes["1_3"] = "text:供应商;url:modicatalog.asp?cid=3;addicon: <a href=addcatalog.asp?pid=3><img src=../images/sysicos/105.gif width=16 height=16 title=增加下级 border=0></a>;delicon: <a href=# onclick=del(3)><img src=../images/sysicos/808.gif border=0 width=16 height=16 title=删除分类></a>;"
       
    tree.nodes["1_4"] = "text:内部;url:modicatalog.asp?cid=4;addicon: <a href=addcatalog.asp?pid=4><img src=../images/sysicos/105.gif width=16 height=16 title=增加下级 border=0></a>;delicon: <a href=# onclick=del(4)><img src=../images/sysicos/808.gif border=0 width=16 height=16 title=删除分类></a>;"
        
    tree.nodes["2_5"] = "text:重点客户;url:modicatalog.asp?cid=5;addicon: <a href=addcatalog.asp?pid=5><img src=../images/sysicos/105.gif width=16 height=16 title=增加下级 border=0></a>;delicon: <a href=# onclick=del(5)><img src=../images/sysicos/808.gif border=0 width=16 height=16 title=删除分类></a>;"
       
    tree.nodes["2_6"] = "text:其他客户;url:modicatalog.asp?cid=6;addicon: <a href=addcatalog.asp?pid=6><img src=../images/sysicos/105.gif width=16 height=16 title=增加下级 border=0></a>;delicon: <a href=# onclick=del(6)><img src=../images/sysicos/808.gif border=0 width=16 height=16 title=删除分类></a>;" document.getElementById('treeviewarea').innerHTML = tree.toString();
              //下面这句代码就是一展开即聚焦到某一节点上的示例
              
              
           
              //-->
              </SCRIPT>
            </td><td width="230" valign=top>
            ·<u><a href="http://www.meizz.com/Web/Article.asp?id=436" target="_blank">使用说明</a></u><br>
            ·<u><a href="http://www.meizz.com/Web/Download/MzTreeView10.rar" target="_blank">下载 MzTreeVew V1.0</a></u><br><br>
            聚焦到<input id=focusId size=5>节点<input type=button value="聚集" onclick="tree.focus(getObjectById('focusId').value)"><br>
            <input type=button value="父层节点←" onclick="tree.upperNode()"><input type=button value="子层节点→" onclick="tree.lowerNode()"><br>
            <input type=button value="上一节点↑" onclick="tree.pervNode()"><input type=button value="下一节点↓" onclick="tree.nextNode()"><br>
            <input type=button value=展开所有节点 onclick="tree.expandAll()"><br>
            <br><ul style="line-height: 14pt">
            <li id=msgNode >1024 个节点的树!
            <li id="TimeShow" style="color: #0000D0">在这里可以看到每个节点加载的耗时
            <li id="TimeNode">
            </ul></td>
          </tr>
        </table>
      </body>
    </html>结果是什么都没显示
    我可能是不是哪错了
    !原谅白痴的问题