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

【问题标题】：how to create dynamic tree structure with list of string paths using javascript如何使用 javascript 创建带有字符串路径列表的动态树结构
【发布时间】：2010-11-08 00:26:48
【问题描述】：

我有一个字符串列表，其中包含一些带有“/”分隔符的文件的路径，这些文件可用于我的 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 这样的公共路径时，它应该展开以显示该目录下的所有文件，再次点击它应该隐藏子文件。对于所有其他节点也是如此。

【问题讨论】：

我删除了“ajax”标签，因为我看不到它是如何涉及任何 ajax 的。对于实际问题，最好的办法是首先将这些字符串转换为哈希，然后进行深度哈希合并。然后在网上找一个插件，把你的 javascript hash 变成 html/js 树形菜单。就目前而言，您的问题不够集中，无法得到很好的回应。你甚至没有提到你正在使用什么 javascript 框架（如果有的话）。
@user 你为什么不使用一些 jquery 插件来构建树结构......而不是你再做一次
@user 试试这个jstree.com

标签： javascript

【解决方案1】：

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

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

供参考：Javascript building tree hierarchy

【讨论】：

感谢 LostInTheCode，根据您的建议，我已经使用 jquery 实现了一个树结构，其中分支和节点的 ahrd 编码值但无法进行第 5 步和第 6 步。如果您能提供代码片段，我将不胜感激按照您的说明执行第 5 步和第 6 步。