如何使用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 building tree hierarchy