Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 23.10.2016, 21:41   #1
Nex
Гигант индустрии
 
Аватар для Nex
 
Регистрация: 13.09.2008
Сообщений: 2,893
Написано 1,185 полезных сообщений
(для 3,298 пользователей)
Как сделать свой TreeView на JS?

Подскажите, пожалуйста, как сделать свой TreeView на JS?

Изначально я сделал не в веб стиле - в скрипте создал классы, связи и тд. и потом уже через скрипт заполнил <div> данными с <li> элементами.
Но возник гемор. При изменениях нужно перерисовывать <div>, что не есть хорошо для веба как я понимаю. Так же (во всяком случае у меня) сбрасывается событие на клик по элементами. Нужно получить dom-елемента родителя и сохранить в каждом элементе. При перестройке иерархии гемор получается.

Сейчас пришел в голову способ заранее создать в html всю иерархию <li>, в js-скрипте найти все dom-елементы, сохранить ссылки на них и уже манипулировать. Но такой вариант кажется унылым.

Может есть еще варианты?
(Offline)
 
Ответить с цитированием
Старый 23.10.2016, 22:26   #2
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Как сделать свой TreeView на JS?

В PlayCanvas редакторе сделал уже не помню как :D
Но вот скрин и исходники.
https://playcanvas.com/editor/scene/js/ui/tree.js
https://playcanvas.com/editor/scene/js/ui/tree-item.js

tree наследует ContainerElement
https://playcanvas.com/editor/scene/...ner-element.js

tree-item наследет Element
https://playcanvas.com/editor/scene/js/ui/element.js

Короче, создаю элементы постоянно, присваиваю им события, обрабатываю, и манипулирую элемент сам.
Также там не мало CSS'а что-бы сделать полоски и визуализацию дерева. Все полосочки кстати полностью на CSS, что очень упрощает рендер. Можешь в PlayCanvas редактор открыть, и подсмотреть испектором как там CSS написан.
Миниатюры
Нажмите на изображение для увеличения
Название: tree.jpg
Просмотров: 897
Размер:	33.7 Кб
ID:	22543  
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Nex (23.10.2016)
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 11:21.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com