[火急]请哪位高手帮忙将这些JavaScript代码装配成树型结构,小弟感激不尽!!!

charming821 2004-05-02 07:59:25
整个树形控件由四部分构成:图形,CSS样式定义,HTML框架代码,JavaScript代码。从图一可以看出,树形控件需要三个图形,分别表示折叠的分支(closed.gif)、展开的分支(open.gif)和叶节点(doc.gif)。
下面是树形控件要用到的CSS样式定义:
<style>

body{

font: 10pt 宋体,sans-serif; color: navy; }

.branch{

cursor: pointer;

cursor: hand;

display: block; }

.leaf{

display: none;

margin-left: 16px; }

a{ text-decoration: none; }

a:hover{ text-decoration: underline; }

</style>
CSS规则很简单:body规则设置了文档的字体和前景(文字)颜色。branch规则的用途是:当鼠标经过拥有子节点的节点时,指针会变成手的形状。之所以要定义两个cursor属性,是因为IE和Netscape使用不同的属性名称。在leaf规则中设置display属性为none,这是为了实现叶节点(不含子节点的最终节点)的折叠效果。在脚本代码中,我们通过把display属性设置成block显示出节点,设置成none隐藏节点。

三、脚本设计
  本文实现的树形控件包含一个tree对象,tree对象拥有一个branches子对象集合;每一个branch(分支)对象又拥有一个子对象的集合。子对象可以是branch对象,也可以是leaf(树叶)对象。所有这三种对象分别实现一个多态性的write()方法,不同对象的write()方法根据所属对象的不同而执行不同的操作,也就是说:tree对象的write()方法与branch对象的write()方法不同,branch对象的write()方法又与leaf对象的write()方法不同。另外,tree和branch对象各有一个add()方法,分别用来向各自所属的对象添加子对象。
在HTML文档的部分加入下面这段代码。这段代码的作用是创建两个Image对象,分别对应分支打开、折叠状态的文件夹图形。另外还有几个工具函数,用于打开或折叠任意分支的子元素,同时根据分支的打开或折叠状态相应地变换文件夹图形。
<script language="JavaScript">

var openImg = new Image();

openImg.src = "open.gif";

var closedImg = new Image();

closedImg.src = "closed.gif";

 

function showBranch(branch){

var objBranch = document.getElementById(branch).style;

if (objBranch.display=="block")

objBranch.display="none";

else

objBranch.display="block";

swapFolder('I' + branch);//这里参数好象有问题

}

 

function swapFolder(img){

objImg = document.getElementById(img);//这里好象差一个 var

if (objImg.src.indexOf('closed.gif')>-1)

objImg.src = openImg.src;

else

objImg.src = closedImg.src;

}

</script>
  代码预先装入图形对象,这有利于提高以后的显示速度。showBranch()函数首先获得参数提供的分支的样式,判断并切换当前样式的显示属性(在block和none之间来回切换),从而形成分支的扩展和折叠效果。swapImage()函数的原理和showBranch()函数基本相同,它首先判断当前分支的图形(打开的文件夹还是折叠的文件夹),然后切换图形。

四、tree对象

  下面是tree对象的构造函数:
function tree(){

this.branches = new Array();

this.add = addBranch;

this.write = writeTree;

}
  tree对象代表着整个树形结构的根。tree()构造函数创建了branches数组,这个数组用来保存所有的子元素。add和write属性是指向两个多态性方法的指针,两个多态性方法的实现如下:
function addBranch(branch){

this.branches[this.branches.length] = branch;

} 

function writeTree(){

var treeString = '';

var numBranches = this.branches.length;

for (var i=0;i <numBranches;i++)

treeString += this.branches[i].write();

document.write(treeString);

}
  addBranch()方法把参数传入的对象加入到branches数组的末尾。writeTree()方法遍历保存在branches数组中的每一个对象,调用每一个对象的write()方法。注意这里利用了多态性的优点:不管branches数组的当前元素是什么类型的对象,我们只需按照统一的方式调用write()方法,实际执行的write()方法由branches数组当前元素的类型决定——可能是branch对象的write()方法,也可能是leaf对象的write()方法。
  必须说明的是,虽然JavaScript的Array对象允许保存任何类型的数据,但这里我们只能保存实现了write()方法的对象。象Java这样的纯面向对象语言拥有强健的类型检查机制,能够自动报告类型错误;但JavaScript这方面的限制比较宽松,我们必须手工保证保存到branches数组的对象具有正确的类型。

五、branch对象
  branch对象与tree对象相似:
function branch(id, text){

this.id = id;

this.text = text;

this.write = writeBranch;

this.add = addLeaf;

this.leaves = new Array();

}
  branch对象的构造函数有id和text两个参数。id是一个唯一性的标识符,text是显示在该分支的文件夹之后的文字。leaves数组是该分支对象的子元素的集合。注意branch对象定义了必不可少的write()方法,因此可以保存到tree对象的branches数组。tree对象和branch对象都定义了write()和add()方法,所以这两个方法都是多态性的。下面是branch对象的add()和write()方法的具体实现:
function addLeaf(leaf){

this.leaves[this.leaves.length] = leaf;

}

function writeBranch(){

var branchString =

'<span class="branch" ' + onClick=' "showBranch(\'' + this.id + '\')"';

branchString += '><img src="closed.gif" id=" ' + this.id + '">' + this.text;

branchString += '</span>';

branchString += '<span class="leaf" id="';

branchString += this.id + '">';

var numLeaves = this.leaves.length;

for (var j=0;j<numLeaves;j++) branchString += this.leaves[j].write();

branchString += '</span>';

return branchString;

}
  addLeaf()函数和tree对象的addBranch()函数相似,它把通过参数传入的对象加入到leaves数组的末尾。
  writeBranch()方法首先构造出显示分支所需的HTML字符串,然后通过循环遍历leaves数组中的每一个对象,调用数组中每一个对象的write()方法。和branches数组一样,leaves数组也只能保存带有write()方法的对象。
六、leaf对象
leaf对象是三个对象之中最简单的一个:
function leaf(text, link){

this.text = text;

this.link = link;

this.write = writeLeaf;

}

leaf对象的text属性表示要显示的文字,link属性表示链接。如前所述,leaf对象也要定义write()方法,它的实现如下:
function writeLeaf(){

var leafString = '<a href="' + this.link + '">';

leafString += '<img src="doc.gif" border="0">';

leafString += this.text;

leafString += '</a><br>';

return leafString;

}
  writeLeaf()函数的作用就是构造出显示当前节点的HTML字符串。leaf对象不需要实现add()方法,因为它是分支的终结点,不包含子元素。
七、装配树形控件
 最后要做的就是在HTML页面中装配树形控件了。构造过程很简单:创建一个tree对象,然后向tree对象添加分支节点和叶节点。构造好整个树形结构之后,调用tree对象的write()方法把树形控件显示出来。下面是一个多层的树形结构,只要把它加入标记内需要显示树形控件的位置即可。注意下面例子中凡是应该加入链接的地方都以“#”替代:
<script language="JavaScript">

var myTree = new tree();

var branch1 = new branch('branch1','JavaScript参考书');

var leaf1 = new leaf('前言','#');

var leaf2 = new leaf('绪论','#');

branch1.add(leaf1);

branch1.add(leaf2);

myTree.add(branch1);

 

var branch2 = new branch('branch2','第一章');

branch2.add(new leaf('第一节','#'));

branch2.add(new leaf('第二节','#'));

branch2.add(new leaf('第三节','#'));

branch1.add(branch2);

 

var branch3 = new branch('branch2','第二章');

branch3.add(new leaf('第一节','#'));

branch3.add(new leaf('第二节','#'));

branch3.add(new leaf('第三节','#'));

branch1.add(branch3);

 

myTree.add(new leaf('联系我们','#'));

myTree.write();

</script>
...全文
32 7 点赞 打赏 收藏 举报
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
hbcb 2004-05-13
树通常都是用递归函数来实现的
  • 打赏
  • 举报
回复
charming821 2004-05-03
我有这些代码生成的树型结构图,但不知道怎样贴上去啊!!!!!!!!!!

请上面的Hharry兄说得清楚点啊!小弟非常感谢!
  • 打赏
  • 举报
回复
dullwolf 2004-05-03
需求太麻烦了,有现成的。
  • 打赏
  • 举报
回复
charming821 2004-05-03
谢谢postfix2(想做浪人)!!!!!
你回公司了请把你的代码发给我,好吧!
小弟总算找到救命的人了
谢谢了啊!!!!!!!
请发到我邮箱zhaojl-12@163.com
或者qq联系 17554446

谢谢了啊…………………………………………………………
  • 打赏
  • 举报
回复
postfix2 2004-05-03
<div> style可以实现,我用这个作过树的
具体的代码我现在没有,回公司了就OK了
  • 打赏
  • 举报
回复
tanzhenhua123 2004-05-03
请讲清楚,同样关注!!!
  • 打赏
  • 举报
回复
Hharry 2004-05-02
用div标签就可实现
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2004-05-02 07:59
社区公告
暂无公告