如何使用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之类的通用路径时，它应该展开以显示该目录下的所有文件，而再次单击它时，则应隐藏子文件。 类似地，用于所有其他节点。

Answer 1

由于您没有可向我们展示的代码，因此我不会为您编写所有代码。 只是概述，要告诉您该方法，您必须编写自己的代码：

1. 将路径以字符串形式存储在javascript中
2. 分别对它们调用string.split（“ /”）并将结果存储在数组中
3. 创建将容纳树的对象
4. 匹配所有相似的顶级数组，然后将所有唯一的顶级目录作为子级附加到在步骤3中创建的对象。
5. 使用细流向下方法继续处理，将子级添加到顶级目录的子级中。
6. 再次通过使用细流向下方法将子级附加到您创建的列表对象中，从而可能将结果呈现为列表。

供参考： Javascript构建树层次结构