用JavaScript生成树结构 第 1 集

当我们打开Windows的资源管理器，可以看到资源管理器的窗口被分成两个部分，左边部分里面的结构我们称之为树（如果看不到这棵树，可以点击“查看”à“浏览栏”à“文件夹”得到），有没有想过我们也可以使用JavaScript等让我们的网页也具有这样的一棵树？如图是我做的一棵简单的树。
你可以点击一下含有子文件夹的文件前面的加减号，或者点击一下文件夹图样，或者再点击一下奥索网站，看一看它是不是能够做到我们想做的事情了？当然，这里仅仅用来演示，所以现在这棵树除了可以链接到奥索网站，并不能做其他的事，但是已经有这些了，你想做的其他事情不是很简单了吗？
我们使用下面的结构定义树的节点：
function NODE(name) //节点定义
{
this.id=ID; //系统自动分配节点ID
this.name=name; //节点名
this.imgopsm=""; //节点获得焦点时显示的图片
this.imgclbg=""; //节点没有焦点时显示的图片
this.imgclsm=""; //节点显示的大图片，列表时需要，可以不用
this.parent=""; //节点的父节点信息
this.child=new CHILD(); //节点的孩子集合
this.link=""; //节点的功能链接，可以不用
this.target=""; //节点链接的目标
this.display=true; //节点显示孩子属性
na.Add(this); //加入节点序列
ID++;
return this;
}
其中孩子集合定义的结构为CHILD。
节点的属性img****用来保存节点的不同状态下显示的图片，小图片（sm）大小为16×16，这里除了根节点，都用一个关闭的文件夹和打开的文件夹来表示两个状态，大图片只是在需要列表的时候才用到，这里不给出。
而节点的link属性和target属性是用来实现节点功能链接的，一般我们把这种树放在一个框架的左边，当我们点击树的节点的时候，框架右边的窗口做出相应的操作和变化，就像在资源管理器中一样。如此我们可以把框架右边的链接赋给link，再把窗口的name赋给target，这样就实现了节点的功能。
当然程序在显示树的时候会过滤空的链接，当链接为空的时候，显示的节点就仅仅是一个文本标记。
而display属性就决定了该节点的子树在当时有没有展开出来，当点击节点前面的加减号的时候，这个属性会改变。

(作者：jincoo　　来源：奥索)