- 浏览: 69721 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (46)
- 行业应用 (10)
- Struts1.X学习开发应用 (7)
- Struts2学习开发应用 (2)
- Hibernate学习开发应用 (8)
- Spring2.5学习开发应用 (3)
- IBatis开发与应用 (2)
- Ajax学习开发应用 (3)
- DWR学习开发应用 (2)
- JQuery学习开发应用 (2)
- Ext学习开发应用 (2)
- WebService学习开发应用 (2)
- xfire学习应用开发 (2)
- xml学习开发应用 (2)
- java基础学习 (2)
- J2EE学习开发应用 (4)
- java Awt/Swing学习开发应用 (2)
- Java Web 学习开发应用 (17)
- J2SE基础学习 (2)
- java 网络编程学习开发应用 (2)
- 设计模式 (3)
- Oracle学习 (2)
- BD2学习 (2)
- 其他数据库 (2)
- SQL学习 (2)
- 报表工具 (6)
- 工作流 (2)
最新评论
核心提示:dtree生成漂亮的动态树型菜单 dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。下载目录: http://www.destroydrop.com/javascripts/tree/
dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。
以下是dtree的用法示例:
1)初始化菜单
- <script type="text/javascript">
- <!--
- 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)调用函数
- <div class="tree">
- <script type="text/javascript">
- <!--
- createTree(Tree,1,7); // starts the tree at the top and open it at node nr. 7
- //-->
- </script>
- </div>
2.jsp动态实现
分以下步骤实现动态的树型菜单:
1)在数据库建tree_info表,有nodeId,parentNodeId,nodeName,nodeUrl四个字段,来存储节点信息。
2)编写java类,用于从数据库找出节点信息,并且生成javascript脚本。
3)编写tag类。用于封装逻辑,简化jsp的开发。
4)建一个web程序进行测试。
3.详细过程
1)在数据库建表,脚本如下:
- 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`)
- )
我使用mysql数据库,如果脚本细节有出入,请自行修改
按照上面的dTree示例插入数据
2)编写TreeInfo.java,这个类用于封装节点信息
- 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
- 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("<!--\n");
- 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("//-->");
- 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
- 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 :
- 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("createTree(Tree,1,7);\n");
- sb.append("//-->\n");
- sb.append("</script>\n");
- sb.append("</div>\n");
- return sb;
- }
- }
标签的tld如下:
- <?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>
- <!--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如下:
- <%@ 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>
发表评论
-
birt db2 查不到结果集 报错
2011-09-07 15:22 3993在Eclipse 里预览时报这个错误。就是因为没有值,rs.n ... -
birt db2 查不到结果集 报错
2011-09-07 15:20 2797根据条件没有查询到结果,就是结果集是0的情况。错误信息:The ... -
WEB前端开发规范文档
2010-12-10 23:38 859规范目的为提高团队协 ... -
DOM Core常用
2010-12-10 23:34 877DOM Core常用部分:DOM方法 ... -
springgraph有没有人用过?
2010-12-04 23:04 1594有没有人用springgraph做过类似搜搜华尔兹、或者明星关 ... -
DHTMLX Tree中文开发指导
2010-11-14 22:35 1017DHTMLX Tree中文开发指导 2009年05月02日 ... -
在b/s开发中经常用到的javaScript技术
2010-11-13 04:32 788在b/s开发中经常用到 ... -
SWFUpload说明文档
2010-10-28 16:25 1224SWFUpload 中文文档地址是:http:// ... -
properties文件的Eclipse插件
2010-10-13 12:01 746一个不错的编写properties文件的Eclipse插件(p ... -
dhtmlxtree文档翻译(转)
2010-10-12 23:01 874页面上初始化树 <div id="treeBo ... -
开源菜单树dhtmlxTree
2010-10-12 22:52 17461. 搭建环境: 在jsp或者html页面中引用 ... -
DhtmlxTree控件实现右键菜单的方法
2010-10-12 22:51 1545免费版的dhtmlxTree不支持右键菜单dhtmlxMenu ... -
利用DhtmlXtree实现展现,修改,添加,删除,移动功能一棵树上实现,iframe的单个滑动条显示,包含在iframe中树节点中文内容过长问题解决
2010-10-12 22:43 3250利用DhtmlXtree实现展现,修改,添加,删除,移动功 ... -
dhtmlxTree开发指导
2010-10-12 18:33 1262dhtmlxTree开发指导 专业版1.6下载地址(CSDN ... -
控制textarea文本长度,并限制输入字数(带统计显示)
2010-09-28 15:26 1916TopstatInput 调用方法 statInput ... -
【转】 JOFC2 - Java API for Open Flash Chart Version-2
2010-09-17 15:47 2197【转】 JOFC2 - Java API for Open ...
相关推荐
this.RecursiveTree1.DataTextField("菜单配置","Menu_ID", "Menu_ParentID", "Menu_Name", "Menu_Url", "Menu_Name","",""); 具体重载方法 说明 添加引用后,控件名.点 自行查看... //这里改写成你的数据库链接.. ...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示,...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示,...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示...