Comments 47
JsTree очень хороший плагин, тоже использовал его.
Мне последнее время больше нравится dynatree, с производительностью там намного лучше.
Да, я знакомился с этим плагином когда начинал проект. Мне он показался менее «интуитивным». По скорости работы не жалуюсь на JsTree. 10к нодов отрисосывается не более пары секунд.
Прекрасно, надо будет поглядеть, что там нового. Раньше всё было хуже…
Плагин отличный, но есть несколько «но». При выпуске последних версий (тех, что на гитхабе) автор очень сильно перелопатил все ядро. В результате на и так не богатую документацию на официальном сайте наложилось еще и то, что она просто не соответствует последней версии. Многие описанные ф-ии не работают или работают совершенно не очевидным образом. Иногда мне приходилось лазить по исходникам, чтобы понять как сделать ту или иную операцию, а иногда даже их править. Как вариант, можно использовать последнюю версию с официального сайта. В целом же плагин отличный, других аналогов ему так и не нашел.
Автора не хило шпигуют репортами и по помему мнению он достаточно оперативно с ними разбирается. Документацию обещает выложить в скором времени.
Не знаю как сейчас, но год-полтора назад, все двигалось очень медленно. Об этом свидетельствует то, что на оф.сайте как висела «pre1.0 fixed», так и висит (более года). Один разработчик все-таки.

Но я искренне надеюсь, что все идет в лучшую сторону. Проект хороший и полезный. [Скрестил пальцы.]
в одном проекте долго мучался,
очень нужно было скрестить JsTree и JGrid
былоб здорово если б кто написал такой плагин
В чем проблема? JsTree спокойно инициализируется «на лету» в нужный блок. Или есть что-то особенно ужасное?
Не знаю требований вашего проекта… Могу предложить глянуть на jqGrid.
Там есть группировка строк (со сверткой списков) и иерархические таблицы.

Демо можно глянуть тут (см. раздел «Grouping» и «Hierarchy»).
Оф.сайт: www.trirand.com/blog/
суть функционала, который мне пришлось реализовать в следующем:
есть правое окно — дерево и левое окно таблица, по навигации в дереве отображается соответствующие элементы таблицы, на разных уровнях ветвей может быть разная структура таблицы.

естественно можно сделать используя JsTree & JqFrid, именно я этим и занимался… и потратил много сил и времени, так как не специалист в JS.

Вот если бы была бы нормальная единая компонента, то многим разработчикам облегчилась бы жизнь.

Вот только и всё, что я хотел подчеркнуть своим предыдущем постом.
в одном проекте долго мучался,
очень нужно было скрестить JsTree и JGrid
былоб здорово если б кто написал такой плагин
Сегодня день дублирующихся комментариев, Чип и Дейл кого-то спасают поди…

По делу — жаль, что нет (или я не нашел) из коробки возможность на разных уровнях ставить разные иконки (на первом одну, на втором вторую, на третьем и далее — третью).
При построении дерева достаточно передать нодам параметр rel и указать в нем тип иконки (folder, file, etc). А при инициализации описать эти типы

Пример инициализации
$(function () {

$("#reference-view")
	.jstree({ 
		"plugins" : [ 
			"themes","json_data","ui","core","types","wholerow"
		],
		"json_data" : { 
			"ajax" : {
				"url" : "/alpha/tree.json",
				"data" : function (n) { 
					
				}
			}
		},
        "types" : {
			"types" : {
				"file" : {
					"icon" : {
						"image" : "file.png"
					}
				},
				"folder" : {
					"icon" : {
						"image" : "folder.png"
					}
				},
				"drive" : {
					"icon" : {
						"image" : "drive.png"
					},
					"start_drag" : false,
					"move_node" : false,
					"delete_node" : false,
					"remove" : false
				}
			}
		},
	});
});
мне тоже этот плагин нравится,
но не нравится что совершенно не понятно как к нему написать плагин (у меня не получилось) — и доки по этому поводу нет.

Нужен был функционал постраничной разбивки. т.е. если узле 1000 вложенных нодов, то получается не уютное дерево, хотелось бы внутри узла большое количество нодов разбивать постранично
С докой есть задержки, согласен. Напишите issue на гитхабе. Автор оперативно отвечает. Меня функционал из коробки пока что полностью устраивает.

Я попытался представить постраничную выдачу нодов в дереве. Не вышло :)
Если к узлу крепится 1000 нодов (даже 100) уже что-то не так с идеологией и UI. Я не могу представить себе такую реальную задачу :(
реальная задача: есть дерево сайта, есть нода «новости», в которой есть новости за последние три-четыре года в количестве около 1000 штук
Так зачем их вешать в дереве, если можно отображать в главном блоке? А в дереве хранить лишь структуру разделов.
Ну или вполне логичное решение — группировать новости по папкам, которые являются месяцами определенного года, например.
Ну да. 1000 явно проблема с продуманностью UI и структурирования.

з.ы. Спасибо вам за 'большой' пример. 5К реально туговато крутится и открывается заметно тормознуто.
Ну тут сам и объем приличный в dom загонять, да и задач таких реально вряд ли найдешь.
Нужно (под)ветки динамически грузить-выгружать
Замечу, что на открытии мы получаем те же 5к. То есть если бы я прогружал изначальные 5к в древовидном формате, то прогруженные узлы открывались бы сразу.
А я вот пользовался и был крайне разочарован производительностью. 2-3 секунды отрисовки при паре тысяч нод на относительно современном компе и мучительное ожидание по 15 секунд на стареньких селерончиках поставило для меня крест на этой библиотеке. Переписал дерево на flash — меньше секунды отрисовки на любом железе.
Давно тестили производительность плагина? Я таких ужасов не наблюдал. Да и подгружать столько нодов это достаточно сурово. Использую ajax подгрузку нодов при открытии узла.
2 месяца назад. Загружать сразу всё было необходимо так как использовался плагин checkbox, а он чисто логически не дружит с постапенной загрузкой. Он же не может поставить галку или снять её не зная всех своих детей. Это можно было обойти переносом этого функционала на сервер, но сервер и так нагружен. А флешёвое дерево оказалось очень просто в реализации.
Да, можно перенести это на сервер, но так же можно при щелчке по чекбоксу прогрузить детей и чекнуть их. Так и делаю в своем проекте.
Активно использовал год назад. В дополнение к отмеченной бедности документации и не соответствия оной актуальному коду, добавлю, что тогда я испытал большие проблемы с настройкой внешнего вида.

Проблема произрастала из того, что часть стилей была жестко «зашита» в код, причем в разных местах, и при отрисовке элементов использовались инлайн определения стилей.

[Подробнее:
Задача тогда стояла, сделать полноценное управление деревом с клавиатуры. Т.е. курсором бегаем по списку, раскрываем/сворачиваем, удаляем/добавляем, выделяем и т.п.
Собственно с управлением проблем не было, а вот нормально отрисовать выделение элемента цветом фона было проблемой. Исходя из задания курсор должен был быть во всю ширину элемента дерева. Но при таком подходе у него постоянно «прыгала» высота от элемента к элементу. Победить так и не смог.
]

Надуюсь в последней версии это исправили, или хотя бы исправят. Нельзя стили и определения размеров элементов запихивать в код.
В этом выделении, правда. есть небольшой баг. При изменении размера блока с деревом(resize) это выделение не пересчитывается по ширине. Хотя если после открыть еще какой нибудь нод, то пересчет происходит. Отправил это автору. Нов принципе и самому вылечить не проблематично.
Вспоминаю…
Этот плагин в каком-то виде был и год назад. Он мне не подошел тогда, т.к. у меня некоторые пункты списка были длинные (читай многострочные). И для этого случая он совсем не годился.

Пытался как-то исправить это изменением стилей и разметки самого элемента. Тогда и столкнулся с тем, что многие параметры жестко забиты в основной код.


«столько нодов», «выделения нода» — откуда такое написание?
Я бы написал, столько нод, выделение ноды и тп.
Когда то в админке хотел использовать этот плагин (JsTree), но чем-то не устроило.
тем более он тогда еще свежий был совсем.
Сейчас посмотрел и вспомнил.
Невозможно было автоматически превращать простую ноду в папку. Т.е. невозможно перенести ноду в ноду чтобы родительская нода автоматом превращалась в папку.
Тогда пришлось писать килобайты своего tree.
Ради интереса посмотрел демки. эта возможность либо не появилась либо ее нет в демо. Глубже не копал.
Это возможно и работает нормально. В примерах автор придерживается логики, что нельзя файл сделать родителем(блокирует перенос в него). Но не отсекает эту реализацию.
Копнул глубже
Jstree показалась тяжелой по сравнению с dynatree.
В конце концов решил оставить свое решение, написанное под конкретную задачу.
Но был бы тогда знаком с dynatree, остановился бы на нем. Это личное мнение.

Only those users with full accounts are able to leave comments. Log in, please.