如何使用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構建樹層次結構