Как создать динамическую древовидную структуру со списком строковых путей с помощью 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. Продолжить с использованием метода trickle-down, добавляя детей к дочерним элементам каталогов верхнего уровня.
6. Измените результаты, вероятно, как список, добавив дочерние элементы в создаваемые объекты списка, снова используя метод trickle down.

Для справки: Javascript building tree hierarchy