当前位置:文档之家› 树形菜单的实现

树形菜单的实现

树形菜单的实现
树形菜单的实现

JSP树形菜单的实现(转载)

(2009-04-20 15:21:03)

转载

标签:

分类:技术讲解

杂谈

1。原理简介

dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。下载目录:https://www.doczj.com/doc/786042711.html,/javascripts/tree/

以下是dtree的用法示例:

1)初始化菜单

2)调用函数

显然,如果用动态的脚本来初始化菜单数组(asp,jsp均可),那就可以很方便的实现动态的树型菜单了。

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;

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;

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

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;

public class InitTreeTag extends TagSupport{

public int doEndTag() throws JspException {

StringBuffer tree = new StringBuffer();

tree.append("\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;

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("

\n");

sb.append("\n");

sb.append("

\n");

return sb;

}

}

标签的tld如下:

PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "https://www.doczj.com/doc/786042711.html,/dtd/web-jsptaglibrary_1_2.dtd">

1.0

1.2

tree

init

com.diegoyun.web.taglibs.InitTreeTag

empty

show

com.diegoyun.web.taglibs.ShowTreeTag

empty

4)建立web过程,编写jsp进行测试。

index.jsp如下:

<%@ page language="java"%>

<%@ taglib uri="/WEB-INF/tlds/tree.tld" prefix="tree"%>

Tree example

Tree example :



ASP NET+TreeView树型菜单操作实例(代码调试通过)

https://www.doczj.com/doc/786042711.html, TreeView树型菜单操作实例(代码调试通过) 本实例完成TreeView树型菜单添加,修改,删除,绑定DropDownList功能,移动功能读者可以自行书写.aspx代码

TreeView操作实例
节点名

js树形菜单代码

a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd {margin:0 0 0 15px;} h4 {margin:0;padding:0;font-size:18px;text-align:center;} p {margin:0;padding:0 0 0 18px;} p a,p a:visited {color:#00f;background:inherit;} /*CNLTreeMenu Start*/ .CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;} .CNLTreeMenu ul {padding:0;} .CNLTreeMenu li {list-style:none;padding:0;} .Closed ul {display:none;} .Child img.s {background:none;cursor:default;} #CNLTreeMenu1 ul {margin:0 0 0 17px;} #CNLTreeMenu1 img.s {width:20px;height:15px;} #CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;} #CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;} #CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;} #CNLTreeMenu2 ul {margin:0 0 0 17px;} #CNLTreeMenu2 img.s {width:17px;height:15px;} #CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;} #CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;} #CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;} #CNLTreeMenu3 ul {margin:0 0 0 17px;} #CNLTreeMenu3 img.s {width:34px;height:18px;} #CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;} /*CNLTreeMenu End*/ /*Temp CSS for View Demo*/ #CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;} #CNLTreeMenu1,#CNLTreeMenu2 {padding-bottom:15px;} .ViewCode { clear:both; border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px; } .ViewCode h6 {color:#00f;}

构建BBS论坛系统项目中后台管理页面中的树形菜单的应用示例

1.1构建BBS论坛系统项目中后台管理页面中的树形菜单的应用示例1.1.1应用XTree树型控件在页面中实现树形菜单 1、应用XTree树型控件 (1)XTree树型控件 xtree.js是Web开发中运用较多的一个树型控件。其入门简单,功能强大,很多人在它的基础上开发出了自己的树型控件。 XloadTree也是https://www.doczj.com/doc/786042711.html,/公司的基于JavaScript的建立树型目录的开源产品,扩展性强,使用简单。由于XloadTree是基于XmlHttp请求/响应模型,必须使用http协议访问代码才可以正确加载XML文件。 (2)下载XTree树型控件(编程方式的系统包) https://www.doczj.com/doc/786042711.html,/ https://www.doczj.com/doc/786042711.html,/download/xtree117.zip

(3)下载XTree树型控件(XML文件方式的系统包、而且该XML文件可以是动态创建)https://www.doczj.com/doc/786042711.html,/dhtml/xloadtree/xloadtree.html

2、xtree有两种使用模式 其一为显示构造树,而其二为运用XML数据源,同时该XML数据源也可以动态在Servlet 组件中创建。 3、显示构造树(可以参考systemManage/contentPage/leftMenu.jsp) (1)第一步需要引用其样式单文件 (2)第二步再引用 xtree.js 文件 (3)第三步编程WebFXTreeItem以产生出菜单 var treeRoot = new WebFXTree('蓝梦BBS论坛后台管理菜单'); var tree_userInfoManaeFolder = new WebFXTreeItem("用户信息管理") var forwardQueryUserInfoItem=new WebFXTreeItem("查询一般用户信息"); forwardQueryUserInfoItem.action=''; forwardQueryUserInfoItem.target="mainFrame"; tree_userInfoManaeFolder.add(forwardQueryUserInfoItem); var forwardQueryVIPUserInfoItem=new WebFXTreeItem("查询VIP用户信息"); forwardQueryVIPUserInfoItem.action='

ABAP 树型菜单程序

ABAP 树型菜单程序 Jerry 项目中树型菜单很少用到,但是学会了,也是一种好事。最近,客户方就有一个要求,能够实现特殊的文档管理,包括动态的树型菜单。此文档中,我就介绍如何用ABAP创建一个简单的树型菜单!下面几个步骤只讲创建树型菜单几个重要的地方,最后面是详细的实现代码。建议学者粗略看看步骤,重点看最后的代码,然后自己学着按下面的DEMO写测试程序,直到成功为止,如有不懂的地方,可以到群内留言。或者文档有写得不好的地方,也可以提出来,我们一起加以改善! 一. 创建一个DIALOG屏幕(0900),创建一个定制控制: TREE_CONTAINER,作为一个容器来存放程序创建的 树型菜单,如下图所示: 二. 在屏幕PBO事件中,创建一个MOUDLE: m_init_tree,然后创建一个Subroutine: frm_init_tree。 在Subroutine中创建一个Object: g_application,g_application指向自己创建的一个Class:lcl_application。这个Class主要定义了一些事件,比如单击,双击,展开,链接单击等事件,用来注册及捕获树型菜单的父节点,子节点单击,双击,展开,链接单击等事件,然后在自己Class :lcl_application中相应自定义的Method中写相应的Code,实现特殊的操作。 三. 用程序创建一个容器类cl_gui_custom_container的实例g_custom_container,代码如下 CREATE OBJECT g_custom_container EXPORTING container_name = 'TREE_CONTAINER' EXCEPTIONS cntl_error = 1 cntl_system_error = 2 create_error = 3 lifetime_error = 4 lifetime_dynpro_dynpro_link = 5.

数据结构课程设计报告,含菜单

算法与数据结构课程设计 报告 系(院):计算机科学学院 专业班级:计科11005 姓名:张林峰 学号: 201003784 指导教师:詹泽梅 设计时间:2012.6.11 - 2012.6.18 设计地点:12教机房

目录 一、课程设计目的 (2) 二、设计任务及要求 (2) 三、需求分析 (2) 四、总体设计 .............. 错误!未定义书签。 五、详细设计与实现[含代码和实现界面].. 8 六、课程设计小结 (15)

一.设计目的 1.能根据实际问题的具体情况,结合数据结构课程中的基本理论和基本算法,分析并正确确定数据的逻辑结构,合理地选择相应的存储结构,并能设计出解决问题的有效算法。 2.提高程序设计和调试能力。学生通过上机实习,验证自己设计的算法的正确性。学会有效利用基本调试方法,迅速找出程序代码中的错误并且修改。 3.初步掌握软件开发过程中问题分析、系统设计、程序编码、测试等基本方法和技能。 4.训练用系统的观点和软件开发一般规范进行软件开发,培养软件工作者所应具备的科学的工作方法和作风。 5.培养根据选题需要选择学习书籍,查阅文献资料的自学能力。二.设计任务及要求 根据《算法与数据结构》课程的结构体系,设计一个基于DOS菜单的应用程序。要利用多级菜单实现各种功能。比如,主界面是大项,主要是学过的各章的名字诸如线性表、栈与队列、串与数组及广义表等,子菜单这些章中的节或者子节。要求所有子菜单退出到他的父菜单。编程实现时,要用到C++的面向对象的功能。 三.需求分析 菜单运用极其广泛,应用于各行各业。菜单运用起来极其方便。随着社会的发展,社会的行业出现多样化,也就需要各式

jQuery树形菜单

jQuery树形菜单(1)jquery.treeview https://www.doczj.com/doc/786042711.html,/fylsh/blog/item/af6ef8dd16056cadcd116602.html jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 从该网站Download得到jquery.treeview.zip文件,里面有需要js、css、images等文件以及Demo, 使用时只要在页面中引入jquery.js、jquery.cookie.js、jquery.treeview.js(树形菜单的方法)、jquery.treeview.css即可。同时保证jquery.treeview.css文件和images文件夹的相对位置,在同一目录下即可 接下来构建树形菜单的内容如下:

  • Folder 1
    • Item 1
  • Folder 2
    • Subfolder 2.1
      • File 2.1.1
      • File 2.1.2
    • File 2.2
  • Folder 3(closed at start)
    • File 3.1
  • File 4
最外面的结点作为外结点,每一个
    表示一个结点,结点中可以添加很多项,项都是以
  • 来说明项里面的内容可以是随意的,比如上面用 来表示结点的内容,你可以用等,当项的内容后面紧接着添加
      后,那么该项就变成了父结点,
      • 之间不能有html代码,
      • 中不能有
      • 元素,否则不会显示。 接下来调用jquery.treeview.js提供的treeview()进行展现。首先把树形菜单对象转化为

        菜单树的设计与实现实验报告

        一、问题描述 创建table保存具有层次结构的菜单树信息,记录菜单的ID,名称,描述,父菜单(可为空)和可用性(enable/disable),菜单的深度无限制。 二、实验内容及步骤 1.首先以sysdba身份登录数据库,命令为:conn / as sysdba 2.创建用户表空间menu,数据文件为:d:\menu.dbf,大小20M,相关命令如下: create tablespace menu datafile 'd:\menu.dbf' size 20M; 3.创建新用户yjmin,默认表空间为新创建的menu表空间,相关命令如下: create user yjmin identified by yjmin default tablespace menu; 4.为新创建用户yjmin授权connect和resource角色; 5.以新创建的用户yjmin登录数据库,命令为:conn yjmin/yjmin; 6.创建序列,自动生成菜单ID,相关命令如下: create sequence id_seq start with 1 increment by 1; 7.创建表menu_tab保存菜单信息: create table menu_tab (id number primary key, name varchar2(50) not null, description varchar2(200), parent_menu varchar2(50), available varchar2(10) not null); 8.向表menu_tab中插入菜单数据,以示例数据插入,并提交插入的数据。 9.打开PL/SQL输出信息,命令为:set serveroutput on; 10.创建函数获取菜单ID: create or replace function get_menu_id (v_name varchar2) return number as

        标准树状导航菜单