运用dtree构建动态树型菜单 _Web前端

使用dtree构建动态树型菜单

2）调用函数

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
?<div class="tree">
? <script type="text/javascript">
? 
? </script>
?</div>

2. jsp动态实现
?? 分以下步骤实现动态的树型菜单：
?? 1）在数据库建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四个字段，来存储节点信息。
?? 2）编写java类，用于从数据库找出节点信息，并且生成javascript脚本。
?? 3）编写tag类。用于封装逻辑，简化jsp的开发。
?? 4）建一个web程序进行测试。

3. 详细过程
?? 1）在数据库建表，脚本如下：

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
CREATE TABLE `test`.`tree_info` (
?? `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`)
?)

Quote:
我使用mysql数据库，如果脚本细节有出入，请自行修改

按照上面的dTree示例插入数据

?? 2）编写TreeInfo.java，这个类用于封装节点信息

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
???? package com.diegoyun.web.tree;
? /**
?? * @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脚本

TreeUtil.java

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
? 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("");
??? 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

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
?package com.diegoyun.web.taglibs; 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\">\n");?? tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));?? tree.append("</script>\n");?? try{??? pageContext.getOut().println(tree.toString());?? }catch(IOException ioe){??? ioe.printStackTrace();?? }?? return super.doEndTag();? } }

ShowTreeTag.java

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
?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\">\n");?? sb.append("<script type=\"text/javascript\">\n");?? sb.append("\n");?? sb.append("</script>\n");?? sb.append("</div>\n");?? return sb;? }??? }

标签的tld

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
<?xml version="1.0" encoding="ISO-8859-1" ?> <!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>? ? <tag>?? <name>init</name>?? <tag-class>com.diegoyun.web.taglibs.InitTreeTag</tag-class>?? <body-content>empty</body-content>? </tag>? ? <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

< src="CodeHighter/prettify.js" type=text/javascript>
Copy code
<%@ page language="java"%> <%@ 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>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/carefree31441/archive/2008/07/28/2724615.aspx