comment créer une structure arborescente dynamique avec liste de chemins de chaînes en utilisant javascript

Question

J'ai une liste de chaînes avec des chemins vers certains fichiers avec le séparateur "/" qui sont disponibles sur ma page jsp/html. dire

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 

La liste ci-dessus des chemins de chaîne sont disponibles sur ma page. J'ai besoin de faire un arbre dynamique avec les données ci-dessus dans la structure de l'arbre ci-dessous en utilisant 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 

Lorsque je clique sur le chemin commun comme + di/d2 il devrait élargir pour afficher tous les fichiers contenus dans ce répertoire, et quand cliquez à nouveau sur elle doit cacher les fichiers enfants. Simmilairement pour tous les autres nœuds.

Answer 1

Puisque vous n'avez aucun code à nous montrer, je ne vais pas tout écrire pour vous. Juste une vue d'ensemble, pour vous dire la méthode, vous devrez écrire votre propre code:

1. Stocker les chemins sous forme de chaînes en javascript
2. Appel string.split («/») sur chacun d'eux et stocker les résultats dans des tableaux
3. Créer un objet qui contiendra l'arbre
4. match tous les principaux tableaux nivelées qui sont similaires, puis ajoutez tous les répertoires de haut niveau uniques que les enfants à l'objet créé à l'étape 3.
5. Continuer processus en utilisant une méthode de ruissellement, en ajoutant des enfants aux enfants des répertoires de premier niveau.
6. Rendez les résultats probablement sous la forme d'une liste, en ajoutant les enfants aux objets de liste que vous créez, en utilisant de nouveau la méthode de répartition.

Pour référence: Javascript building tree hierarchy