在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是dTree，原则上可以达到无限级，当然实际运行中4，5级就已经很多了，dTree的速度还是不错的，而且是JS实现，完全在客户端实现，不占用服务器资源。同时我们可以定制dTree的显示图标，那么我们就来看看怎么制作简单而又完整的导航树。
首先是下载dTree组件，本文附件中提供完整的示例，直接使用即可。下面我们先来看看dTree组件的结构：
这很简单，由一个JS文件，一个样式表文件和提供的基本图标构成，总体20几K，非常小，不占用网络流量。制作dTree的导航树时，也是一个HTML页面，那么我们就要在页面引入相关资源：
<head>
<title>导航树</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">@import url('components/dtree/dtree.css');</style>
<script type="text/javascript">var dtreeIconBasePath = "components/dtree";</script>
<script language="javascript" src="components/dtree/dtree.js"></script>
</head>
下面就是导航树内容的编写了，做一个很简单很强大的示例：
<script type="text/javascript">
var treeMenu = [
{ level:1, name:"用户管理"},
{ level:2, name:"用户列表", ico:"images/tico_way.gif",link:"user_list.html"},
{ level:2, name:"角色管理"},
{ level:3, name:"角色列表", ico:"images/tico_way.gif",link:"role_list.html"},
{ level:3, name:"用户角色", ico:"images/tico_way.gif",link:"ur_list.html"},
{ level:1, name:"信息管理"},
{ level:2, name:"新闻管理", ico:"images/tico_way.gif",link:"news_list.html"},
{ level:2, name:"公告管理", ico:"images/tico_way.gif",link:"bulletin_list.html"},
{ level:1, name:"系统邮件", ico:"images/tico_way.gif"},
{ level:1, name:"网络文件", ico:"images/tico_way.gif",link:"disk_list.html"}
];
</script>
可以看出level是当前项目的层级，name就是显示的名称，ico是指定的图标，不指定时系统使用默认图标，link就是点击时进入的地址。当然非叶子节点元素一般是不需要地址的，那么不写就可以了，而叶子节点不写的话该行就是不可点击进入的效果。这是一个混合了1，2，3层的导航树。有了这些还不够，它们不能被解析，下面来看看解析的JS。
<script type="text/javascript">
//建立新树
tree = new dTree('tree');
tree.config.target = "MainFrame";
tree.config.useCookies = false;
var selNum = -1;
var link = "";
//根目录
tree.add(0,-1,'系统管理中心', null, null, null, '', '');
var count = 0;
var pLevelIdArray = new Array();
pLevelIdArray[1] = 0;
var currLevel = 1;
for (var i=0; i<treeMenu.length; i++) {
var item = treeMenu[i];
var itemLevel = item.level;
pLevelIdArray[itemLevel+1] = ++count;
if (item.link!=null && item.link!="") {
if (item.ico!=null) {
tree.add(count, pLevelIdArray[itemLevel], item.name, item.link, null, null, item.ico, item.ico);
} else {
tree.add(count, pLevelIdArray[itemLevel], item.name, item.link);
}
} else {
if (item.ico!=null) {
tree.add(count, pLevelIdArray[itemLevel], item.name, null, null, null, item.ico, item.ico);
} else {
tree.add(count, pLevelIdArray[itemLevel], item.name);
}
}
if (item.select) {
selNum = count;
link = item.link;
}
}
document.write(tree);
tree.openAll();
if (selNum != -1) {
tree.openTo(selNum,true);
top.document.frames["MainFrame"].location.href=link;
}
</script>
这样就可以了，主要是这里用了frame，页面的显示会在MainFrrame中显示，这是一般管理系统的结构，左侧导航树，右侧主显示区域，上侧是登录信息和模块切换，下侧就是版权声明了。
这样就能正常显示一棵树了，但是有时我们需要折叠和展开导航树，这个也很简单，如下即可：
<div style="display:block;margin-bottom:5px;">
菜单控制:
【<a href="#" onclick="tree.openAll();this.blur();return false;" style="color:#333333">展开</a>】
【<a href="#" onclick="tree.closeAll();this.blur();return false;" style="color:#333333">折叠</a>】
</div>
这样就完整了，我们来看看实际的效果吧：
折叠后的效果就是：
实际中，页面代码不需要每个页面都完整写出，我们可以抽取成宏，直接调用宏即可，下面结合FreeMarker来优化一下编码结构，实际生成的效果都是一样的。
<#-- 树形控件 tree -->
<#macro tree root="" display="">
<style type="text/css">@import url('components/dtree/dtree.css');</style>
<script type="text/javascript">var dtreeIconBasePath = "components/dtree";</script>
<script language="javascript" src="${base}/components/dtree/dtree.js"></script>
<#nested>
<div style="display:${display};margin-bottom:5px;">菜单控制:【<a href="javascript:void(0)" onclick="tree.openAll();this.blur();return false;" style="color:#333333">展开</a>】【<a href="javascript:void(0)" onclick="tree.closeAll();this.blur();return false;" style="color:#333333">折叠</a>】</div>
<div class="dtree">
<script type="text/javascript">
//建立新树
tree = new dTree('tree');
tree.config.target = "MainFrame";
tree.config.useCookies = false;
var selNum = -1;
var link = "";
//根目录
tree.add(0,-1,'${root}', null, null, null, '${base}/images/tico_root.gif', '${base}/images/tico_root.gif');
var count = 0;
var pLevelIdArray = new Array();
pLevelIdArray[1] = 0;
var currLevel = 1;
for (var i=0; i<treeMenu.length; i++) {
var item = treeMenu[i];
var itemLevel = item.level;
pLevelIdArray[itemLevel+1] = ++count;
if (item.link!=null && item.link!="") {
if (item.ico!=null) {
tree.add(count, pLevelIdArray[itemLevel], item.name, item.link, null, null, item.ico, item.ico);
} else {
tree.add(count, pLevelIdArray[itemLevel], item.name, item.link);
}
} else {
if (item.ico!=null) {
tree.add(count, pLevelIdArray[itemLevel], item.name, null, null, null, item.ico, item.ico);
} else {
tree.add(count, pLevelIdArray[itemLevel], item.name);
}
}
if (item.select) {
selNum = count;
link = item.link;
}
}
document.write(tree);
tree.openAll();
if (selNum != -1) {
tree.openTo(selNum,true);
top.document.frames["MainFrame"].location.href=link;
}
</script>
</div>
</#macro>
这是FreeMarker的宏定义。那么在页面如何使用呢，很简单：
<@p.tree root="管理中心" display="block">
<script type="text/javascript">
var treeMenu = [
{ level:1, name:"用户管理"},
{ level:2, name:"用户列表", ico:"images/tico_way.gif",
link:"user_list.html"},
{ level:2, name:"角色管理"},
{ level:3, name:"角色列表", ico:"images/tico_way.gif",
link:"role_list.html"},
{ level:3, name:"用户角色", ico:"images/tico_way.gif",
link:"ur_list.html"},
{ level:1, name:"信息管理"},
{ level:2, name:"新闻管理", ico:"images/tico_way.gif",
link:"news_list.html"},
{ level:2, name:"公告管理", ico:"images/tico_way.gif",
link:"bulletin_list.html"},
{ level:1, name:"系统邮件", ico:"images/tico_way.gif"},
{ level:1, name:"网络文件", ico:"images/tico_way.gif",
link:"disk_list.html"}
];
</script>
</@p.tree>
后续我们会结合RBAC模型来介绍一下简单动态权限树的生成。一家之言，仅供参考，希望对使用者有用。
- 大小: 45.6 KB
- 大小: 44.5 KB
- 大小: 36 KB
分享到：
相关推荐
以上就是使用`dTree`生成无限级树形菜单的基本步骤。需要注意的是，实际应用中可能需要考虑性能优化，例如分页加载子节点，以防止一次性加载大量数据导致页面响应变慢。同时，为了增强用户体验，还可以添加搜索、...
总结起来，dTree是一款强大的JavaScript树形菜单组件，它简化了无限级树的构建过程，提供了丰富的功能和高度的定制性。无论是初学者还是经验丰富的开发者，都能从中找到适合自己的解决方案，提升项目的开发效率。...
以下将详细讲解如何使用jQuery的dtree插件创建动态生成树，并基于描述中提到的8种实例进行深入解析： 1. **基本实例**：这是最简单的dtree应用，只需引入必要的CSS和JS文件，设置HTML结构，并调用dtree方法初始化树...
dtree组件是一款基于JavaScript实现的树形控件，它提供了丰富的功能，便于用户在Web应用中展示层次结构的数据。在这个特定的案例中，我们关注的是带有Checkbox功能的dtree，这使得用户可以对树形结构中的节点进行...
本实例着重于实现菜单树的生成，这对于构建多级导航系统尤其有用，比如网站的侧边栏菜单或者复杂的后台管理系统。 首先，我们要理解`dtree`。`dtree`是基于jQuery的一个插件，它允许用户通过HTML元素来创建和管理树...
5. **dTree插件**：dTree是一款基于JavaScript的可折叠树形菜单组件，用于在网页上显示层次结构的数据。在本项目中，前端可能利用dTree来展示从服务器获取的JSON数据，实现动态的、可交互的无限级联树视图。 6. **...
本文将深入探讨“js dtree无限级扩展的树形菜单”这一主题，这是一种基于JavaScript的树形菜单插件，适用于构建多层次、可扩展的导航系统。 首先，我们来了解“js dtree”的基本概念。js dtree 是一个JavaScript库...
DTree动态展示树形菜单.rar ...本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql
2. **异步加载树节点**：当用户展开一个节点时，使用Ajax发送请求到服务器，获取该节点的子节点数据，然后使用dtree提供的API将新数据插入到现有树中。 3. **优化策略**：通常，初始加载只展示顶级节点，其余节点按...
本项目"spring+struts2+hibernate+json+dtree+mysql实现的无限级联树"就是一个典型的例子，它整合了多种技术和工具，以创建一个能够显示和操作无限层级关系的数据树。以下是对该项目中涉及的技术点的详细解释： 1. ...
综上所述，DTree与JQuery的结合使用为前端开发提供了强大的工具，使得动态生成树节点变得简单易行。通过深入学习和实践，开发者可以创建出交互性强、用户体验良好的树形界面。对于提供的压缩包文件，"dtree_JQuery...
本篇文章将深入探讨如何利用`dtree`组件来实现树形类表，并分享相关的知识点。 首先，我们要理解`dtree`的核心概念。`dtree`是一个基于JavaScript的轻量级库，它允许开发者在网页上构建可交互的树形视图。这个组件...
标题提到的"Dtree+Jquery动态生成树节点"是指使用DTree插件结合jQuery库来创建可交互的、动态更新的树形结构数据展示。这篇博文链接指向的是张荣（zhangrong108）在ITEYE上的博客文章，虽然具体的描述是空的，但我们...
在IT行业中，动态生成树节点是一项常见的需求，特别是在构建数据可视化、权限管理或者导航菜单等场景下。本项目结合了JSP（JavaServer Pages）、dTree（一个JavaScript实现的树形菜单库）以及Taglib（自定义标签库）...
【dtree：JavaScript实现的简单树形菜单组件】 在网页开发中，为了更好地组织和展示层级关系复杂的数据，树形控件（Tree View）是一种常用的设计元素。`dtree`是一个专为此目的设计的轻量级JavaScript组件，它提供...
以上就是关于dtree jQuery实例动态生成树的知识点概述，包括其核心原理、API使用、动态加载、自定义样式、事件处理、实例化配置以及集成优化等方面。在实际开发中，根据项目需求，灵活运用这些知识可以构建出高效、...
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql 菜单既有普通的树结构展示,也有...
【dtree 树结构 前端】是一种在前端开发中常见的数据展示方式，它用于构建和展现层次化的数据结构，比如文件系统、组织架构或者导航菜单等。在这个主题下，我们将深入探讨dtree的实现原理、前端技术栈以及相关的实践...