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

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

NameTypeDescription
idNumberUnique identity number.
pidNumberNumber refering to the parent node. The value for the root node has to be -1.
nameStringText label for the node.
urlStringUrl for the node.
titleStringTitle for the node.
targetStringTarget for the node.
iconStringImage file to use as the icon. Uses default if not specified.
iconOpenStringImage file to use as the open icon. Uses default if not specified.
openBooleanIs 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


  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

Bird

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值