用javascript实现一棵简单的树

时间:2021-12-29 04:52:55

一直想弄清楚windows注册表里面的那个树用js怎么搞出来,昨天倒腾了一天,终于小有成就,实现了一棵拥有基本功能的js树。

用javascript实现一棵简单的树

以前看树感觉最复杂的部分就是那些各种线条,各种加号减号到底怎么组织出来的,用css又怎么画出一棵树来。昨天看了司徒正妹的博客,有了一些灵感,然后就试着自己摆弄了一下。

司徒用的是纯div的形式,而我用的dl列表的形式。用dl有个好处,就是即使没有样式,也能将就看,而且在语义化上也更说得过去。

好了,废话到此,下面就看怎么样一步步实现的吧

 

首先我们来试着画一棵静态树,我们把树分为文件夹和文件,文件夹的图标和名字放到dt里,文件夹的内容放到dd里,如果文件夹里还有子文件夹,那么子文件也是一个dl,以此类推

然后是加号减号、文件左边的虚线、左边的细线:

加号减号就是图片,但是要注意的是不同位置的加号减号四周的虚线是不一样的,一共有四种情况:

第一种:在一棵树的跟节点上,且这个根节点没有兄弟节点

用javascript实现一棵简单的树

第二种:在一棵树的根节点上,且这个根节点还有兄弟节点

用javascript实现一棵简单的树

第三种:在一棵树的分支节点上,前面后面均有兄弟节点

用javascript实现一棵简单的树

第四种:在一棵树的末尾分支上,只有前面有兄弟节点

用javascript实现一棵简单的树

文件左边的虚线只有两种情况:

第一种:非最后一个文件

用javascript实现一棵简单的树

第二种:最后一个文件

用javascript实现一棵简单的树

最后是列表左边的那天长长的竖线,这条竖线的实现其实很简单,给dl设置一个背景,然后repeat:repeat-y即可,不过只有非末尾节点才有这条线(因为这条线就是连接各个节点的线):

用javascript实现一棵简单的树

有了这些基本图标,我们就可以试着画一颗树了:

注意我给dl元素添加的open和close的样式,这两个样式可以用来控制文件夹的展开和收起。

随后的工作就是想办法用js来生成这些html代码了,为了使用方便,我们数据源的格式使用json,json里的对象或者数组代表文件夹,其他代表文件。这样递归循环这个json,最后把整棵树的html代码生成好,然后添加到容器里面。

在递归过程中,我们需要检测节点的位置,从而得到相应的节点图标,这个其实不难,最后我们把这个位置信息放到dl节点的自定义属性tree-position里,方便在展开和收起树的时候通过这个属性得到相应的图标。

最后我们给树的外层容器添加click方法,click后根据父节点的className来判断是收起还是展开树。

这样,一棵完整的树就生成了。如果需要链接,直接把json的属性值改为html字符串就行。