手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>程序设计>Java技术>列表

教你如何使用JSP面向对象web编程技术实现树形控件

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!


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()方法。 

  必须说明的是,虽然java script的Array对象允许保存任何类型的数据,但这里我们只能保存实现了write()方法的对象。象Java这样的纯面向对象语言拥有强健的类型检查机制,能够自动报告类型错误;但java script这方面的限制比较宽松,我们必须手工保证保存到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="I' 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="java script">

var myTree = new tree();

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

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','第二章');

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!