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

最新推荐文章于 2019-03-14 13:04:00 发布

Bird

最新推荐文章于 2019-03-14 13:04:00 发布

阅读量1.9k

点赞数 2

分类专栏： JavaScript 文章标签： stylesheet 数据库 import null xhtml html

本文链接：https://blog.csdn.net/a352193394/article/details/7460920

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

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

首先需要下载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

Bird

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用dtree创建动态树型导航栏

树形导航栏应该是非常常见和经典的结构，但是一般项目中都会使用动态的树形结构，也就是这个结构可以根据你的要求动态的增加或者减少，而且所有的内容都是通过读取数据库得到，下面我们来做一个这样的例子。首先需要下载dtree，这个网上非常多，随便下载。解压后里面有dtree.js和dtree.css，还有img这三个文件就够了，导入到你的工程目录下面。然后就是使用了。既然是动态树形结构，首先需要
复制链接

扫一扫

专栏目录