`
sarin
  • 浏览: 1764290 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
E3b14d1f-4cc5-37dd-b820-b6af951740bc
Spring数据库访问系列...
浏览量:174244
C2083dc5-6474-39e2-993e-263652d27795
Android学习笔记
浏览量:369408
5f40a095-b33c-3e8e-8891-606fcf3b8d27
iBatis开发详解
浏览量:189854
B272a31d-e7bd-3eff-8cc4-c0624ee75fee
Objective-C学习...
浏览量:100702
社区版块
存档分类
最新评论

用dTree组件生成无限级导航树

阅读更多
    在做管理系统时不可避免要用到导航树,这种东西只要一次做好,就可以随处运行,目前比较好的组件是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
10
0
分享到:
评论
6 楼 sarin 2010-12-02  
zhujinguo 写道
bepatient 写道
正想学习,下载后,双击tree.html,页面为空。怎么回事?

同上

检查浏览器的编码方式,应该是UTF-8
5 楼 zhujinguo 2010-12-02  
bepatient 写道
正想学习,下载后,双击tree.html,页面为空。怎么回事?

同上
4 楼 sarin 2010-11-26  
lqixv 写道
这个树用起来非常简单,这是它最大的优点。

但缺点同样明显,当树节点达到大约1000个左右时,就会特别慢,甚至会把浏览器给卡死(尤其是 ie)。还有,就是不支持ajax动态生成树,也不支持添加复选框等。虽然在网上有解决方案,但都不好。

现在一般都用 jquery 插件 jsTree,这个插件的评价只有一句话:很好很强大!当然,相对也复杂一点。

嗯,但是可以根据权限动态生成出来,因为JSON文本可以遍历出来。现在的应用基本不会达到1000节点的规模吧。
3 楼 lqixv 2010-11-26  
这个树用起来非常简单,这是它最大的优点。

但缺点同样明显,当树节点达到大约1000个左右时,就会特别慢,甚至会把浏览器给卡死(尤其是 ie)。还有,就是不支持ajax动态生成树,也不支持添加复选框等。虽然在网上有解决方案,但都不好。

现在一般都用 jquery 插件 jsTree,这个插件的评价只有一句话:很好很强大!当然,相对也复杂一点。
2 楼 sarin 2010-09-05  
bepatient 写道
正想学习,下载后,双击tree.html,页面为空。怎么回事?

检查浏览器的编码方式,应该是UTF-8
1 楼 bepatient 2010-09-05  
正想学习,下载后,双击tree.html,页面为空。怎么回事?

相关推荐

    dTree 无限级树形菜单

    总结起来,dTree是一款强大的JavaScript树形菜单组件,它简化了无限级树的构建过程,提供了丰富的功能和高度的定制性。无论是初学者还是经验丰富的开发者,都能从中找到适合自己的解决方案,提升项目的开发效率。...

    spring+struts2+hibernate+json+dtree+mysql实现的无限级联树(全)

    5. **dTree插件**:dTree是一款基于JavaScript的可折叠树形菜单组件,用于在网页上显示层次结构的数据。在本项目中,前端可能利用dTree来展示从服务器获取的JSON数据,实现动态的、可交互的无限级联树视图。 6. **...

    一个利用JavaScript开发的dtree树状菜单组件

    在dtree组件中,JavaScript会根据JSON数据生成或更新DOM元素,创建树形结构。节点的添加、删除和移动都涉及到DOM操作,这包括创建新元素、设置属性、添加事件监听器等。 3. 渲染与样式:为了在页面上展示树状菜单,...

    ssh+json+dtree+mysql实现N级动态树形菜单+增删改查

    而"spring+struts2+hibernate+json+dtree+mysql实现的无限级联树"则是整个系统的代码实现,包括了所有上述组件的详细配置和实现。 总的来说,这个项目提供了一个完整的SSH+JSON+DTREE+MySQL实现N级动态树形菜单的...

    dtree 带复选框

    总之,"dtree 带复选框"是一种实用的前端组件,它结合了无限级树形结构和复选框选择功能,适用于需要用户进行多层级选择的场景。通过源码学习,开发者可以深入理解如何在前端实现这样的交互效果,并将其应用到自己的...

    javascript-tree控件集合 大部分JS树形菜单控件 精心收集

    在给定的标题和描述中,我们看到提到了多个JavaScript实现的树形菜单控件,如dtree、无限级树状菜单、struts+h ibernate树形菜单、treeview、xmltree以及dhtmltree等。接下来,我们将深入探讨这些控件及其在实际应用...

    JavaScript与web树形菜单全

    JavaScript是Web开发中不可或缺的一部分,尤其在构建交互式的用户界面时。树形菜单是一种常见的UI...通过理解和实践“dTree”和“webtree”中的代码,开发者可以掌握创建无限级树形菜单的技巧,提升Web应用的用户体验。

    无限级可刷新Js树型菜单

    无限级可刷新Js树型菜单是一种常见的前端交互设计,它在网页中用于展示层次结构的数据,如文件系统、组织架构或者导航菜单等。这种菜单的特点是它可以无限制地展开和折叠,用户可以逐级深入查看内容,同时支持动态...

Global site tag (gtag.js) - Google Analytics