用js实现树形结构

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;
} 版权申明：本站文章均来自网络，如有侵权，请联系028-86262244-215，我们收到后立即删除,谢谢！

function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;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="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="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('联系我们','#'));

 

版权申明：本站文章均来自网络，如有侵权，请联系028-86262244-215 ，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。