使用dtree创建动态树型导航栏

树形导航栏应该是非常常见和经典的结构，但是一般项目中都会使用动态的树形结构，也就是这个结构可以根据你的

要求动态的增加或者减少，而且所有的内容都是通过读取数据库得到，下面我们来做一个这样的例子。

首先需要下载dtree，这个网上非常多，随便下载。解压后里面有dtree.js和dtree.css，还有img这三个文件就够

了，导入到你的工程目录下面。然后就是使用了。既然是动态树形结构，首先需要常见数据库表，下面我把我常见的表

结构看一下

CREATE TABLE `treeinfo` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `nodeid` int(10) unsigned NOT NULL, `parentid` int(10) unsigned NOT NULL, `name` varchar(255) NOT NULL, `url` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;
自带的例子非常经典<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Destroydrop » Javascripts » Tree</title> <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> </head> <body> <div class="dtree"> <script type="text/javascript">  </script> </div> </body> </html>

Functions

add()

Adds a node to the tree.
Can only be called before the tree is drawn.

id, pid and name are required.

Parameters

Name	Type	Description
id	Number	Unique identity number.
pid	Number	Number refering to the parent node. The value for the root node has to be -1.
name	String	Text label for the node.
url	String	Url for the node.
title	String	Title for the node.
target	String	Target for the node.
icon	String	Image file to use as the icon. Uses default if not specified.
iconOpen	String	Image file to use as the open icon. Uses default if not specified.
open	Boolean	Is the node open.

Example

mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

add方法的参数已经在上面了。然后就是使用了，我是开发的自定义标签来完成对数据库的访问然后放入到request域

里面进行获取。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@taglib uri="http://www.bird.com" prefix="s"%> <%@page language="java" import="java.util.List"%> <%@page language="java" import="oop.hg.ytu.beans.TreeBean"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" href="/JavaLessonSite/dtree.css" type="text/css"></link> <script type="text/javascript" src="/JavaLessonSite/dtree.js"></script> </head> <body> <s:getList/> <div class="dtree"> <script type="text/javascript"> d = new dTree('d'); d.add(0,-1,''); <% @SuppressWarnings("unchecked") List<TreeBean> list = (List<TreeBean>)request.getAttribute("list"); for(int i = 0; i < list.size(); i++){ TreeBean bean = (TreeBean)list.get(i); %> d.add(<%=bean.getNodeId()%>,<%=bean.getParentId()%>,'<%=bean.getName()%>', '<%=bean.getUrl()%>'); <% } %> document.write(d); </script> </div> </body> </html>
<s:getList/>这个是自己开发的标签，用来完成对数据库的访问和封装。

下面的就是JSP代码嵌套javascript

posted on 2012-04-14 16:42 sp2012 阅读(1233) 评论(0) 编辑收藏举报