首页logo
  •  

jonllen

金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。

个人档案

jonllen
心情闪存 | 给他留言
妮称:jonllen
来自:中国. 湖南. 湘潭
简述:金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。
博客日历

几种形式的JavaScript树结构菜单

分类:JavaScript

今天我主要讲3种不同展示的JavaScript树结构菜单,分别是悬浮层树(Tree)、右键菜单树(ContextMenu)和节点树(TreeMenu),目前都支持无限级层次。

1.悬浮层树(Tree)

这种树结构实现类似面包屑导航功能,监听的是节点鼠标移动的事件,然后在节点下方或右方显示子节点,依此递归显示子节点的子节点。

这里要注意几个小问题,其一这种树结构是悬浮层绝对定位的,在创建层的时候一定要直接放在body的下面,这样做的是确保在IE里面能遮掩住任何层,因为在IE里面是有stacking context这种东西的潜规则在里面的,另外当然还有一个select老掉牙的问题,这里是采用在每个悬浮层后面加个iframe元素,当然同一级的菜单只产生一个iframe元素,菜单有几级将产生几个iframe遮掩,然后菜单显示和隐藏的时候同时显示和隐藏iframe。

不过这种菜单并不合适前台,因为目前只支持在脚本里动态添加菜单节点,而不能从现有的html元素获取菜单节点,我们为了SEO等前台导航一般是在后台动态输出的,假如菜单有多级的话也建议不超过2层,对客户来说太多层也懒得去看,不过有个面包屑导航显示还是很不错的。

2.右键菜单树(ContextMenu)

自定义右键菜单(ContextMenu)和悬浮层树(Tree)其实现上都大同小异,都是在脚本里动态添加节点,然后在生成一个绝对定位层,只不过右键菜单树(ContextMenu)触发的事件不一样。另外右键菜单还需要提供一个动态添加菜单项功能,以实现右击不同的元素可以显示不同的右键菜单,我这里提供一种"回调函数",使用见如下代码:

ContextMenu回调函数

那么"回调函数"如何来实现呢?其实很简单,就是函数运行到某一行代码时运行预先设置的"回调函数",有点像事件机制,如同绑定多个window.onload事件,由于之前可能有绑定函数,所以先记录之前的函数,再设置新绑定的函数,之后再调用之前绑定的函数。上面的所示代码实现右击元素如果为treemenu节点,则在右键里添加添加和删除treemenu节点菜单,效果见后面节点树(TreeMenu)示例。

回调函数里我们需要注意作用域,this指针指向当前回调函数对象,而不是在运行回调函数的上下里,不过我们也可以使用call方法来把回调函数在当前this上下文里运行。我这里是采用给回调函数传递2个参数的办法,这样在回调函数就能很方便的获取this对象和其他变量,这个在Ajax的Callback回调函数里普遍使用。

自定义右键菜单(ContextMenu)只适合一些辅助功能的快捷操作,如有一些业务功能复杂的OA系统等,下面我也将会结合节点树(TreeMenu)进行使用。如果可以话尽量不要使用右键菜单,其一是需要培训用户右击操作的习惯,其二自定义右键菜单丢失掉了原有右键菜单的一些功能,如查看源文件等。

  1. 这里右键菜单区域。
  2. 右击我你可以看属性哦。
  3. 你也可以选择我再右击复制。

3.节点树(TreeMenu)

节点树(TreeMenu)是我们实际项目中运用得最多了,网上很著名的有梅花雪的MzTreeVew,听说对大数据量时做了一些优化,效率很高。但我不太喜欢拿来主义,有些东西既然我看不懂或还不明白它为什么要这么做,所以就想尝试着自己来"造轮子"。当然功能肯定是没有MzTreeVew的那么强大,大数据量时我也没有做效率测试,图片先借MzTreeVew的。

无限级节点树

要实现无限级的功能,如果没有什么小技巧,好象就只能递归了。不过需要注意一定要有个正确条件判断来return,避免死循环。从数据的存放结构来说,一般我们数据库里保存有id、name、parentId字段,树结构里仍然保存这种结构,在展开树节点的时候我们需要根据id获取它所有的子节点,并保存起来,避免第二次重复遍历。

层次关系结构

我这里是想说,呈现出来的HTML具有层次关系,每一个树节点对象有层次关系。HTML层次关系表现为子节点的元素一定是父节点的元素的子节点,本来我觉得这并不是必须的,后来我发现只有这样做才能保持子子节点的状态,比如我点击一级节点只需要展开所有的二级节点,三级或四级节点的状态不需要改变,HTML结构有这种层次关系支持就很容易实现。与之相对应的是树节点对象,它保存着父节点对象、子节点集合对象、引用元素等等,以方便递归调用,这些信息都被附加到对应的dom元素上。

带checkbox和radio选择

实际项目的需求都是复杂多变的,有时候我们需要提供radio单选功能,有时候可能需要提供checkbox多选功能,为了能在后台直接获取选择的值,提供带checkbox和radio选择功能也是必须的。当然,是否创建checkbox或radio我们可以在实例化时配置指定,每一个节点初始化时是否选中也可设置指定,这里需要注意的是我们直接创建checkbox和radio是不能指定name属性的,转个弯换种思路来实现即可。

var inputTemp = document.createElement('div');
inputTemp.innerHTML
= '<input type="radio" name="ids" />';
var inputElem = inputTemp.childNodes[0];

只绑定一个click事件

看似较复杂的树结构,其实我只给最外面的容器元素绑定了一个click事件而已,另外点击checkbox的联动也是在这个click事件里处理的,因为元素的事件是会向父元素冒泡触发的,并且很容易使用事件对象event获取触发源元素,因此我就能获取你点击是checkbox还是什么其他的元素了,很方便。这样做的好处就是集中来处理一个事件,而不需要臃肿的给每一个元素添加事件,充分展示代码的优雅之美。

提示:右击菜单可添加和修改节点

4.结束语

如果有细心的童鞋查看原代码,发现我在实例化活动函数的时指定的参数很多地方都是构建成一个静态对象,如下面的代码段:

treemenu.push({
id :
9999,
parentId :
0,
html :
'无限级树节点',
href :
'#',
img :
'/style/default/ico_profile.gif',
disabled :
true,
createExpand :
false,
click :
function (treemenu) {
alert(
'您选择了'+treemenu.html);
}
});

那么为什么要这样做呢?这里我来解释一下我这么做的用意:看上去使用复杂了一点,其实用处可大着呢。指定一个静态对象的参数,可以获取它所有的属性和值,并能与预设的参数属性比较,指定缺失参数的默认值。并且有利于以后的扩展,比如新增一个属性直接在预设的参数对象里添加一个默认属性即可,这样也不用修改之前传递过来的参数,在有多个不定的arguments参数时非常实用。算是一个小技巧吧,像jQeruy插件等构造函数初始化都有用到。

//默认的参数对象
var item = {
id :
null,
level :
1,
parentId :
0,
html :
'',
title :
'',
href :
'javascript:;',
target :
'_self',
css :
'item',
img :
null,
click :
null,
createExpand :
true,
expand :
false,
checked :
false,
disabled :
false,
children :
null
}

//初始化缺失属性参数默认值
for( p in item) {
if( !settings.hasOwnProperty(p) ) settings[p] = item[p];
}

 

标签:JavaScript js,menu
  • posted@ 2010-05-09 17:17
  • update@ 2010-05-09 17:26:25
  • 阅读(11612)
  • 评论(4)

相关文章

评论
1楼 文夕 2010-05-22 09:46:24
很专业,有些看不懂
回复:呵呵,还好拉...(2010-05-22 20:33:11)
2楼 大梦 2010-05-28 23:20:14
很好用,有详细的参数说明吗
怎么样加载时展开指定节点
回复:呃,这个还没有。不过要做展开指定节点思路应该是这样的:先找到要展开的节点对象,然后递归展开父级节点。(2010-05-29 09:14:40)
3楼 大梦 2010-05-30 22:44:45
有参数说明和事件说明吗?
回复:没有,这是我自己写的一个Demo,没有具体的帮助说明文档...(2010-05-31 10:59:45)
4楼 大梦 2010-05-31 10:42:46
能指点一下展开或收缩指定节点吗。搞了很久搞不定,能给下示例代码,谢谢
回复:右击,查看源文件...(2010-05-31 10:58:12)
发表评论
*必填
回复通知我
*必填