javascript - 如何使用javascript创建带有字符串路径列表的动态树结构

Question

我有一个字符串列表，其中包含一些带有“/”分隔符的文件的路径，这些文件可用于我的 jsp/html 页面。即

d1/d2/d3/file1.c
d1/d2/d3/file2.java
d1/d2/file3.jsp
d1/d2/file4.asp
d1/d2/d3/d4/file4.asp
d11/d22/d33/file5.txt

上面的字符串路径列表可用于我的页面。我需要使用 javascript 在下面的树结构中使用上面的数据创建一个动态树结构。

+d1/d2/
 file3.jsp
 file4.asp

+d1/d2/d3/
 file1.c
 file2.java

+d1/d2/d3/d4/
 file4.asp

+d11/d22/d33/
 file5.txt

当我点击像 +di/d2 这样的公共(public)路径时，它应该展开以显示该目录下的所有文件，当再次点击它时应该隐藏子文件。对于所有其他节点也是如此。

Answer 1

由于您没有代码可以展示给我们，所以我不会为您编写所有代码。只是一个概述，告诉你方法，你必须自己写代码:

1. 在 javascript 中将路径存储为字符串
2. 对它们中的每一个调用 string.split("/") 并将结果存储在数组中
3. 创建将容纳树的对象
4. 匹配所有相似的顶级数组，然后将所有唯一的顶级目录作为子级附加到在步骤 3 中创建的对象。
5. 使用滴流法继续处理，将子级添加到顶级目录的子级中。
6. 通过再次使用 trickle down 方法将子级附加到您创建的列表对象，将结果可能呈现为列表。

供引用:Javascript building tree hierarchy