面向对象的javascript目录树控件设计与应用

原创 2004年09月15日 09:59:00

摘要:本文介绍阿赖javascript目录树控件程序的设计与应用。想了解更多请点这里,想下载控件程序和教程请点这里


阿赖目录树控件程序简介<?XML:NAMESPACE PREFIX = U1 />

之前我曾经使用ASP设计过生成目录树的程序,那就是Open Host系统的目录树,完成于20031月份,在此之前浏览过www.9499.net的朋友对此一定有印象。如今使用javascript设计的这个目录树控件程序方法上与ASP有很大的差别,可以说难度更大,使用上更具灵活性,它是目前功能最强使用最简便的目录树程序。关于这个目录树控的功能特性方面,以下几点值得一提:

一、引入了图片控件与目录树控件配合使用,大大提高了灵活性。这一点上主要参考了VB6TreeView控件

二、在控件程序中引入了事件处理机制,增强了功能,也大大提高了使用的灵活性。

三、提供了大量的对象接口和方法。

四、提供了多种添加目录树节点的方法,有add方法,addLink方法,以及独创的pathParse方法(用来解析路径列表,以最简单的代码快速的构造目录树)

五、目录树样式不受限制,用户完全可以设计出风格各异,灵活多变的目录树来。

六、提供多种现成的目录树模板,用户不必再费心去设计目录树样式,只需选取喜欢的模板,添加树节点即可,多快好省!

七、控件程序可根据需要进行功能扩展,目前提供checkbox节点扩展程序(alai_tree_check.js)就是一个很好的范例。

I. 概述:

阿赖目录树控件程序完全采用面向对象的方法设计,整个程序封装一个函数alai_tree()里面,另外随目录树程序提供了一个图片列表imagelist控件(alai_imagelist())。使用阿赖目录树控件程序构建目录树一般遵循以下三个步骤:

一、建立imagelist实例对象,并向控件添加建目录树所需的图片;

二、新建一个目录树控件实例,将上述imagelist实例对象作为第一个参数传递;

三、调用目录树控件的各种对象、方法,添加节点,定义事件处理程序等。

当然我们有更便捷的方法,就是使用现有的目录树模板程序以更简化的步骤来构建目录树,关于模板程序搁后再谈。在建立目录树前我先来理解目录树控件的三个核心对象:

(1)目录树控件实例对象(tree),如下:

??? var tree=new alai_tree()

??? 这样就新建了一个树对象。

(2)根(root)对象:tree.root,可以看出它是tree的一个成员,它是没有外观表现的,用于构建目录树第一级的节点,是第一级节点的父对象(parent)。

(3)节点(node)对象,对应于目录树上的一个节点,如下:

 var node=tree.add(...) //添加节点,参数先省略不谈

 上面调用目录添加节点的方法,生成了一个新的节点对象:node

这三个对象各自拥有很多的成员对象(属性、方法和事件),具体请查看《目录树控件对象参考》。接下举个例子,来看看构键目录树的过程:

?

II. 示例程序:

var images=new alai_imagelist() //建立imagelist实例对象

images.path="images/" //图片路径

images.add("file.gif","default") //添加图片,第二个参数是键值(key)

images.add("folder") //添加图片,文件后缀".gif"省了,键值缺省取文件名:"folder"

images.add("html","link")? //添加html.gif,键值为link

var tree1=new alai_tree(images,16,divTree1) //注意参数divTree1是目录树放置的地方,

//网页上有这样的代码:

,生成的目录树就插到这里面了。

var root=tree.root

var n1=root.add("节点一","default","js","alert('节点一')")

//等效代码:var n1=tree1.add(root,"last","节点一","n1","","js","alert('节点一')")

/* 下面代码演示各种添加节点的方法 */

var n2=root.add("节点二","folder")

var n23=n2.add("2-3") //添加n2的子节点

var n22=tree1.add(n23,"prev","2-2","n22") //将节点n22添加到n23之前

var n20=tree1.add(n2,"first","2-0","n20","file",) //由于"first"参数,这个节点作为n2的第一个子节点

var n3=tree1.add(root,"last","节点三","folder")

var n31=n3.addLink("http://www.9499.net") //添加n2的子节点

var n32=tree1.add(n3,"last","www.9499.net","n32","page","url","http://www.9499.net") //添加n2的子节点

var colNode=tree.pathParse("/节点四/4-1;/节点四/4-2;/节点四/4-3;/节点五/")

var n4=root.addLink("http://www.9499.net","欢迎访问9499.NET")

 

III. 添加节点的方法:

在上面的示例中我们总共接触到了五种添加目录树节点的方法,先看它们的语法原型:

1.tree.add(toNode,relation,text,key,ico,exeCategory,exeArg)

2.root.add(text,ico,exeCategory,exeArg)

3.root.addLink(url,text,target,ico)

4.node.add(text,ico,exeCategory,exeArg)

5.node.addLink(url,text,target,ico)

6.tree.pathParse(path,pathSeparator,listSeparator)

方法1的功能最全面,涵盖了方法2-5,但部分参数我们很少用到,所以用的较多的还是方法2-5。root对象的add方法总是添加第一级的节点,节点node对象的add方法用于添加节点的子节点。addLink方法方便我们添加有网址链接的节点。pathParse方法可解释一个路径列表生成对应的树结构。各个参数的说明请看目录树控件对象参考

?

IV. 节点关系:

??? 阿赖目录树控件程序对于树结构有一个明晰的逻辑表述,这一点表现在树节点对象的下面几种关系上:

 node.first -- 节点的第一个子节点,若无子节点则为null

 node.last -- 节点的最后一个子节点,若无子节点则为null

 node.next -- 节点下一个相邻的子节点,若node是该层上最后一个结点则为null

 node.prev -- 节点上一个相邻的子节点,若node是该层上第一个结点则为null

 node.parent -- 节点的父节点

 node.chidren -- 节点的子节点(它是一个的集合数组,第个元素是一个节点对象)

对于根对象root:

root.first是第一级节点的第一个节点,root.last是第一级节点的最后一个节点,root.chidren是第一级节点的集合,第一级节点的parent等于root。

?

V. 节点对象的成员对象:

节点对象node包含了一些成员对象(属性),为了方便说明和理解,截了一张图放大后加上标注。如下:

node_obj.JPG

数字所标示的对象依次为:

1.node.exIcon

2.node.icon

3.node.label

4.node.lineIcon[0]

5.node.body

6.node.container

 

VI. 访问节点对象:

1.从上面的示例中我们已经看到add方法会返回新添加的节点对象,将之赋予一个变量,以后随时可以访问。

2.所有添加的节点保存在tree.nodes集合数组中,如对于第一个添加的节点:

 var n0=tree1.add(root,"last","节点一","node0")

  除了n0指向该节点外,tree.nodes[0]也指向该节点,另外我们还指定了一个键值:"node0",因此tree.nodes["node0"]也指向了该节点,因此n0、tree.nodes[0]和tree.nodes["node0"]引用的都是同一个对象。

3.执行目录树节点遍历的方法:可以从root.first开始根据节点关系可按多种方法进行遍历,在此不作深究。如果不关心树的逻辑结构进行遍历推荐的方法是:

for(var i=1;i

可能你会想到另一种方法:

for(var i=0;i

也是可行的,但要注意如果有节点设了键值的话,该节点会被访问两次!

4.其它获得节点对象的方法:

??? (1)树对象的方法:getNodeByPath、getNodeByTier、getSelectNode、getActiveNode

??? (1)节点对象的方法: getSibling、节点关系(next,first,last,prev,parent,children)

VII. 节点的操作:

1.删除节点:node.remove() 或 tree.removeNode(node)

2.子节点的展开与收缩:

??? 展开:node.expand(true),收缩:node.expand(false),自动:node.expand()

??? 展开一个分枝(展开子节点孙子节点):node.expand(true,true)

??? 展开所有节点:tree.expandAll(true),收缩所有节点:tree.expandAll(false)

??? 展开至第二层:tree.expandToTier(2)

?

IX. imagelist控件与目录树控件的关系:

imagelist用于向目录树控件提供构建目录树的各种图片(图标),在目录树控件中这些图片是如何被使用的呢?在添加节点的方法中ico参数是用于设置节点图标的,如上例中n1节点ico为"default",这就是添加节点时指定的键值,除了用键值我们还可以用索引值,因为"default"是第一个添加的图标其索引值为0,用0来代替"default"也是可以的。可见目录树控件是通过键值(字符串)或索引值(正整数)来引用imagelist控件中的图片的。

我们还注意到有些节点添加时ico参数是缺省的,但是该节点还是有图标显示的,这就是要谈的另一个议题--约定键值。约定键值是指imagelist控件中具有这些键值的元素在目录树控件会有特殊的用途,约定键值有以下几种:

1、default -- 默认图标,在ico参数缺省时节点使用默认图标,图例:file.giffold2k_close.gifbook1_close.gif

2、expandcollapse -- 用于控制子节点展开和收缩,

  常用图例:plus_m.gifminus_m.gifplus.GIFminus.GIFplus1.gifminus1.gif

3、expand_topexpand_endcollapse_topcollapse_end,在使用上面第一组图例时提供首尾不同的图片

  图例:plus_top.GIFplus_end.GIFminus_top.GIFminus_end.GIF

4、leaftwig -- 用于指示树叶节点和末稍节点的图标,图例:branch.gifbranch_end.gif

5、lineblank -- 用于画目录树支干连线。图例:vline.gifblank.gif(blank是一张空白的图片)

6、link -- 特别用于addLink方法,ico参数缺省时使用,图例:html.gif

按照这种约定,如果你要显示控制节点展开/收缩的图片,应该在向imaglist添加expand和collapse键值的图片,同理要显示枝干连线就要添加line和blank键值的图片。如果你提供了default图标且添加节点时没有指定的ico参数,default图标就被派上用场了。这是一种非强制的约定,你甚至可以不向imagelist添加任何图片,这样你构建的就是没有图片的树。正是因为这种约定关系使得阿赖目录树程序拥有超强的灵活性,你可以使用各种的组合,选取各种的图标,构建出各式各样的目录树来!

?

XI. 事件处理:

一、事件处理机制:

树对象的事件有:onclick , ondblclick , onmousemove , onmouseover , onmouseout , onmouseup , onmousedown , onkeypress , onkeydown , onkeyup , oncollapse , onexpand , afteradd , onblur , onfocus , onselect

节点对象的事件有:onclick , ondblclick , onmouseover , onmouseout , onmousemove , onmousedown , onmouseup , onkeypress , onkeydown , onkeyup , oncollapse , onexpand , onfocus , onblur , onselect

树对象的事件用于响应所有节点的相应事件,节点对象是针对个别的节点进行处理。有一个很重要的特点:树对象的事件处理程序的第一个参数都是引发该事件的节点对象,节点对象的事件均没有参数。我们注意到两者的事件名几乎相同(tree.afteradd事件例外),对于onclick事件它是这样执行的:当鼠标点击节点时,将会执行node.onclick的事件处理程序,如果处理程序返回值为true,接着执行tree.onclick事件,反之如果node.onclick的处理程序返回值为false(或没有返回值),则tree.onclcik事件不会被执行。其它事件都是类同于此,这就是事件处理机制,有点类似DOM(文档对象模型)的事件冒泡(bubble)。

添加节点add方法的两个参数:exeCategory和exeArgv是用来设置节点要执行的动作,例如:

n1=tree.root.add("test","","js","alert('hello')")

n2=tree.root.add("9499.net","","url","http://www.9499.net")

则单击n1将弹出"hello",单击n2将打开网址www.9499.net。如果缺省这两个参数默认动作是执行expand方法展开或收缩子节点(如果有的话)。单击节点执行的动作实际上是调用node.execute()方法,面execute()方法执行的动作又取决于exeCategory和exeArgv两个参数。node.execute()和onclick事件的联系是这样的:如果tree.onclick事件处理程序返回值为true,将接着调用node.execute()方法,若返回值为false或无返回值,则node.execute()方法不会被执行,这是事件处理机制的别一个方面。

二、事件处理程序:

事件处理程序一般用来控制节点的行为。

示例:如果我们想让节点有类似超链接的效果,即当鼠标移过时文字变蓝,加下划线,但对于节点n11却不想让它如此,可以用下面的事件处理程序实现:

//鼠标移入时
tree.onmouseover=function(srcNode)
{
???? srcNode.label.style.color="blue"
???? srcNode.label.textDecoration="underline"
???? srcNode.label.cursor="hand"
}

//鼠标移出时
tree.onmouseout=function(srcNode)
{
??? srcNode.label.style.color="black"
??? srcNode.label.textDecoration="none"
}

//对节点11特别处理
n11.onmouseover=n11.onmouseout=function(){return false}

另外点击节点时默认动作是让节点获得焦点选择加亮显示,如果不想让节点被选择可以让tree.onselect事件处理程序返回值为false,就可以屏蔽这个行为,如下:

tree.onselect=function(srcNode){return false}

XII.使用模板程序:

阿赖目录树控件程序具有设计多样化树状菜单的能力,为了更方便广大使用者,我们将一些设计好的菜单封装成模板程序,这样用户就可以顺手拈来,省去样式设计的麻烦。模板程序为我们选好了使用的图片,设计了一些基本的事件处理程序,用户只须写添加节点的代码就行了,可谓快速高效,多快好省!在示例目前提供了如下几种常用的模板程序,(以后会有更多更酷的!):

alai_tree_win2k.js -- win2000 explorer风格模板
alai_tree_winxp.js -- winxp explorer风格模板
alai_tree_help.js -- chm帮助风格模板
alai_tree_pretty.js -- 一个很靓的目录树模板
alai_tree_qq.js -- QQ面板模板
alai_tree_cool.js -- COOL面板模板 (真的很酷)

现在我们以win2k模板为例,说明模板程序的使用:

一、首先加载控件程序和模板程序到网页,代码:

二、调用模板,添加节点:

//实例化目录树模板程序,将返回一个树对象。

var tree2=new alai_tree_win2k(divTree) //divTree是目录树放置的地方,如果缺省目录树会放到网页的最前面。

tree2.root.add("节点一")

tree2.root.add("节点二")

看,用这样的方法建目录树多省事!!其实这些模板程序并不复杂,你可以研究一下这些程序然后DIY出属于自己的模板,做出来别忘了跟我分享你的成果!

XIII. 目录树控件功能扩展:

阿赖目录树控件的功能到目前为止已经相当完美,相信你在网上找不到比这功能更强大的目录树程序了,但是它的功能还是不止于此,我们可以根据需要扩充它的功能。alai_tree_check.js是目前提供的一个扩展程序,加载目录树程序后再加载alai_tree_check,目录树控件就会增加具有添加多选按扭checkbox的节点的功能。加载alai_tree_check后目录树将增加如下成员对象:

tree.addChkNode(toNode,text,ico,exeCategory,exeArg,checked) 方法添加具有checkbox的节点(参数用途可参考tree.add方法)

tree.colChkNode 属性,保存具有checkbox的节点的集合数组

tree.oncheck 和 node.oncheck事件 点击checkbox时触发该事件

node.isCheck 属性,用于判断节点是否有checkbox

node.checkBox 属性,节点的checkbox对象

下面结合另一具模板程序pretty的使用来说明该扩展程序的使用:

一、首先加载控件程序,模板程序和扩展程序到网页(注意:扩展程序的加载一定要置后于控件程序),代码:


二、调用模板,添加节点:


var tree3=new alai_tree_pretty(divTree) //divTree是目录树放置的地方,如果缺省目录树会放到网页的最前面。
tree3.root.add("节点一") //添加普通节点
tree3.addChkNode(tree3.root,"节点二") //添加有checkbox的节点

JavaScript组件设计思想

将每个功能点最小颗粒化、然后将其封装成模块;创建数据中心,使各个模块不在互相调用嵌套,所有的依赖和调用全部通过数据中心(这里使用自定义事件实现的观察者模式);所有的网状的需求点,划点成线,最终形成操作...
  • ligang2585116
  • ligang2585116
  • 2016年03月19日 19:44
  • 1562

网站设计之常见简单实用的JavaScript特效总结(上篇)

这篇主要是总结JavaScript常见简单实用的特效,主要从代码量短、简单实用几个方面进行叙述。其中特效包括: 1.鼠标悬停图片切换查看器; 2.鼠标移动图片放大; ...
  • Eastmount
  • Eastmount
  • 2016年12月19日 00:54
  • 2765

OCX控件开发及WEB Javascript如何使用OCX控件

本文主要讲解如何使用VS 2010 的IDE开发网页OCX控件,及网页(Javascript)如何使用OCX控件(OCX控件在网页中使用方法)...
  • yangyuyu77584
  • yangyuyu77584
  • 2014年10月18日 20:35
  • 2209

JavaScript的应用在什么地方?

JavaScript的应用在什么地方?JavaScript虽然与Java的名称类似,但二者不论在性质上还是在用途上都大不相同:Java是一种类似于C++的高级语言   JavaScript虽然与...
  • pi19740306
  • pi19740306
  • 2015年01月29日 10:25
  • 1362

【JavaScript设计模式】(一)

最近在学习JavaScript设计模式,学习过之后感觉很有收获,现把自己的学习内容总结如下: 模式:是一种可服用的解决方案,可用于解决软件设计中遇到的常见问题。 设计模式:有三大好处,模式是...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年07月10日 13:16
  • 3397

JS 实现控件拖拽/拖动

下面是实现控件拖拽的完整代码,只实现了拖拽,边界控制没做,可以自行添加。 (function ($) {     var move = false;             //标记控件是否处于被...
  • aphy358
  • aphy358
  • 2015年11月24日 14:45
  • 2890

Javascript 基础控件属性记录

Javascript属性记录: 1、 window.history.[属性、方法] back()-->加载history列表中的前一个URL相当于go(-1) forward()---->加载hi...
  • L23hbc
  • L23hbc
  • 2016年09月12日 20:31
  • 295

JavaScript程序设计之常用窗口对象

1.Screen 对象属性及说明 availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。 availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 ...
  • u012505695
  • u012505695
  • 2014年03月26日 20:30
  • 699

JavaScript设计模式--模板方法模式

一、定义模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。二、示例Coffee or T...
  • ligang2585116
  • ligang2585116
  • 2015年12月20日 19:29
  • 1426

Windows 应用商店应用程序中的 Hub 项目和控件一览

Windows 应用商店应用程序中的 Hub 项目和控件一览
  • wangrenzhu2011
  • wangrenzhu2011
  • 2014年04月04日 14:03
  • 1097
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:面向对象的javascript目录树控件设计与应用
举报原因:
原因补充:

(最多只允许输入30个字)