1。原理简介
dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。下载目录:http://www.destroydrop.com/javascripts/tree/
以下是dtree的用法示例:
1)初始化菜单
<!--
var Tree = new Array;
// nodeId | parentNodeId | nodeName | nodeUrl
Tree[ 0 ] = " 1|0|Page 1|# " ;
Tree[ 1 ] = " 2|1|Page 1.1|# " ;
Tree[ 2 ] = " 3|1|Page 1.2|# " ;
Tree[ 3 ] = " 4|3|Page 1.2.1|# " ;
Tree[ 4 ] = " 5|1|Page 1.3|# " ;
Tree[ 5 ] = " 6|2|Page 1.1.1|# " ;
Tree[ 6 ] = " 7|6|Page 1.1.1.1|# " ;
Tree[ 7 ] = " 8|6|Page 1.1.1.2|# " ;
Tree[ 8 ] = " 9|1|Page 1.4|# " ;
Tree[ 9 ] = " 10|9|Page 1.4.1|# " ;
Tree[ 10 ] = " 11|0|Page 2|# " ;
// -->
</ script >
2)调用函数
< script type ="text/javascript" > ...
<!--
createTree(Tree,1,7); // starts the tree at the top and open it at node nr. 7
//-->
</ script >
</ div >
显然,如果用动态的脚本来初始化菜单数组(asp,jsp均可),那就可以很方便的实现动态的树型菜单了。
2。jsp动态实现
分以下步骤实现动态的树型菜单:
1)在数据库建tree_info表,有nodeId,parentNodeId,nodeName,nodeUrl四个字段,来存储节点信息。
2)编写java类,用于从数据库找出节点信息,并且生成javascript脚本。
3)编写tag类。用于封装逻辑,简化jsp的开发。
4)建一个web程序进行测试。
3。详细过程
1)在数据库建表,脚本如下:
`node_id` INTEGER UNSIGNED NOT NULL DEFAULT - 1 ,
`parent_id` INTEGER UNSIGNED NOT NULL DEFAULT - 1 ,
`node_name` VARCHAR ( 45 ) NOT NULL ,
`ref_url` VARCHAR ( 45 ) NOT NULL ,
PRIMARY KEY (`node_id`)
)
我使用mysql数据库,如果脚本细节有出入,请自行修改
按照上面的dTree示例插入数据
2)编写TreeInfo.java,这个类用于封装节点信息
/** */ /**
* @author Diegoyun
* @version 1.0
*/
public class TreeInfo ... {
private int nodeId = -1;//node id
private int parentId = -1;//parentId
private String nodeName = null;//node name
private String url = null;//url references
public int getNodeId() ...{
return nodeId;
}
public void setNodeId(int nodeId) ...{
this.nodeId = nodeId;
}
public int getParentId() ...{
return parentId;
}
public void setParentId(int parentId) ...{
this.parentId = parentId;
}
public String getNodeName() ...{
return nodeName;
}
public void setNodeName(String nodeName) ...{
this.nodeName = nodeName;
}
public String getUrl() ...{
return url;
}
public void setUrl(String url) ...{
this.url = url;
}
}
编写TreeUtil.java,用于从数据库得到节点信息,封装到TreeInfo对象,并生成javascript脚本
package com.diegoyun.web.tree;
import java.util.Collection;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
/** */ /**
* @author Diegoyun
* @version 1.0
*/
public class TreeUtil ... {
public static List retrieveNodeInfos()...{
List coll = new ArrayList();
String driverName = "com.mysql.jdbc.Driver";
String host = "localhost";
String port = ":3306";
String serverID = "test";
String userName = "root";
String userPwd = "root";
String url = "jdbc:mysql://" + host + port + "/" + serverID ;
Connection conn = null ;
PreparedStatement ps = null;
ResultSet rs = null;
try...{
Class.forName(driverName).newInstance();
conn = DriverManager.getConnection(url , userName , userPwd);
String sql = "select * from tree_info";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
TreeInfo info = null;
while(rs!=null && rs.next())...{
info = new TreeInfo();
info.setNodeId(rs.getInt(1));
info.setParentId(rs.getInt(2));
info.setNodeName(rs.getString(3));
info.setUrl(rs.getString(4));
coll.add(info);
}
// if(rs!=null){
// rs.close();
// rs=null;
// }
// if(ps!=null){
// ps.close();
// ps=null;
// }
}catch(Exception e)...{
System.out.println(e);
}
return coll;
}
public static String createTreeInfo(List alist)...{
StringBuffer contents = new StringBuffer();
contents.append("<!-- ");
contents.append("var Tree = new Array;");//create a array in javascript
TreeInfo info =null;
for(int max = alist.size(),i=0;i<max;i++)...{
info = (TreeInfo)alist.get(i);
//define elements of array
contents.append("Tree[");
contents.append(i);
contents.append("]="");
contents.append(info.getNodeId());
contents.append("|");
contents.append(info.getParentId());
contents.append("|");
contents.append(info.getNodeName());
contents.append("|");
contents.append(info.getUrl());
contents.append("";");
}
contents.append("docment.writer(Tree);");
contents.append("//-->");
return contents.toString();
}
public static void main(String[]args)...{
List alist = TreeUtil.retrieveNodeInfos();
// TreeInfo info = null;
// for(Iterator i = c.iterator();i.hasNext();){
// info = (TreeInfo)i.next();
// System.out.println("*****" + info.getNodeName());
// }
System.out.println(TreeUtil.createTreeInfo(alist));
}
}
3)编写标签类
InitTreeTag.java
import com.diegoyun.web.tree.TreeUtil;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import java.io.IOException;
/** */ /**
* @author Diegoyun
* @version 1.0
*/
public class InitTreeTag extends TagSupport ... {
public int doEndTag() throws JspException ...{
StringBuffer tree = new StringBuffer();
tree.append("<script type="text/javascript"> ");
tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));
tree.append("</script> ");
try...{
pageContext.getOut().println(tree.toString());
}catch(IOException ioe)...{
ioe.printStackTrace();
}
return super.doEndTag();
}
}
ShowTreeTag.java :
package com.diegoyun.web.taglibs;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import java.io.IOException;
/** */ /**
* @author Diegoyun
* @version 1.0
*/
public class ShowTreeTag extends TagSupport ... {
public int doEndTag() throws JspException ...{
StringBuffer buffer = showTree();
try ...{
pageContext.getOut().println(buffer.toString());
}
catch (IOException ioe) ...{
ioe.printStackTrace();
}
return super.doEndTag();
}
private StringBuffer showTree()...{
StringBuffer sb = new StringBuffer();
sb.append("<div class="tree"> ");
sb.append("<script type="text/javascript"> ");
sb.append("<!-- ");
sb.append("createTree(Tree); ");
sb.append("//--> ");
sb.append("</script> ");
sb.append("</div> ");
return sb;
}
}
标签的tld如下:
<! DOCTYPE taglib
PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd" >
< taglib >
< tlib-version > 1.0 </ tlib-version >
< jsp-version > 1.2 </ jsp-version >
< short-name > tree </ short-name >
<!-- initTreeTag -->
< tag >
< name > init </ name >
< tag-class > com.diegoyun.web.taglibs.InitTreeTag </ tag-class >
< body-content > empty </ body-content >
</ tag >
<!-- ShowTreeTag -->
< tag >
< name > show </ name >
< tag-class > com.diegoyun.web.taglibs.ShowTreeTag </ tag-class >
< body-content > empty </ body-content >
</ tag >
</ taglib >
4)建立web过程,编写jsp进行测试。
index.jsp如下:
<% ... @ taglib uri="/WEB-INF/tlds/tree.tld" prefix="tree" %>
< html >
< head >
< title > Tree example </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" >
< link rel ="StyleSheet" href ="tree.css" type ="text/css" >
< script type ="text/javascript" src ="tree.js" ></ script >
< tree:init />
</ head >
< body >
< b > Tree example : </ b >< br />< br />
< tree:show />
< br />< br />
</ body >
</ html >
测试,enjoy yourself!
4。待解决问题
dTree有点小bug,如果把css,img,js的路径改变,树就有可能不会正确显示。