www.boolean.name

www.boolean.name (http://forum.boolean.name/index.php)
-   JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)
-   -   Как сделать свой TreeView на JS? (http://forum.boolean.name/showthread.php?t=20452)

Nex 23.10.2016 18:41

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

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

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

Может есть еще варианты?

moka 23.10.2016 19:26

Ответ: Как сделать свой TreeView на JS?
 
Вложений: 1
В 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 написан.


Часовой пояс GMT +1, время: 08:39.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Перевод: zCarot