`
BradyZhu
  • 浏览: 247936 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用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">
		<!--
		d = new dTree('d');
		d.add(0,-1,'');
		d.add(1,0,'建筑业面临的挑战和机遇','example01.html');
		d.add(2,0,'对建筑信息化的理解','example01.html');
		d.add(3,0,'施工企业解决方案','example01.html');
	d.add(4,0,'系统的部署','example01.html');

		d.add(5,4,'总体部署','example01.html');

		d.add(6,4,'部署特征','example01.html');

		d.add(7,6,'计划管理','example01.html');

		d.add(8,6,'成本管理','example01.html');

		d.add(9,6,'项目管理','example01.html');

		d.add(10,6,'物流管理','example01.html');

		d.add(11,6,'财务管理','example01.html');

		document.write(d);

		//-->

	</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


分享到：
| JavaScript访问控制外部CSS并判断浏览器版 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics