Создаём деревья на сайте с помощью JQuery и Dynatree

Автор: Амадей Красавчик Дериглазов

Недавно встала передо мной задача реализовать в интерфейсе сайта иерархическую древовидную структуру с широким набором функциональных возможностей, например перетаскивание элементов от одного родительского элемента к другому, редактирование элементов, добавление, удаление и т.д. Понятно, что тратить собственное время на написание плагина не хотелось… а хотелось, воспользовавшись плодами чужого труда, закрыть этот вопрос максимально быстро. Однако оказалось, что найти хороший плагин на jquery для создания многоуровневого дерева элементов – задача непростая. В моём понимании хороший плагин должен обладать тремя качествами:

  • хорошая документация
  • мощная функциональность
  • красивый дизайн с возможностью дополнительных настроек

Так вот, пересмотрев несколько десятков плагинов jquery-деревьев, обнаружил, что всеми тремя перечисленными качествами обладает всего один единственный плагин – Dynatree. О чём и спешу поделиться. Плагин Dynatree – невероятно профессиональный продукт, с которым очень легко разобраться и приспособить его под любые задачи. Ниже на картинке представлен конечный вариант моей работы с использованием Dynatree – по-моему, получилось очень даже симпатично. А теперь давайте перейдём к делу.

Итак, официальный сайт проекта Dynatree - http://wwwendt.de/tech/dynatree/.На нём представлены, рабочие примеры, имеется подробная документация, ну и, разумеется, имеется возможность скачать плагин в виде архива. Для работы плагина потребуется на сайте подключить библиотеку jquery и библиотеку jquery ui. В принципе документация к плагину Dynatree настолько хорошо написана, что какие-то ещё комментарии излишни. Поэтому вместо подробного описания методов и атрибутов, приведу только самые общие принципы работы.

Инициализация дерева с помощью Dynatree

Чтобы можно было инициализировать объект иерархического дерева с помощью Dynatree, необходимо в тексте html-кода страницы предусмотреть объект div, например, <div id="tree" style="width:350px"></div>. Код для инициализации «дерева»:

$("#tree").dynatree({
initAjax: {
url: "ajax/get_geographic_tree.php"
},
onLazyRead: function(node){
node.appendAjax({url: "ajax/get_geographic_tree.php?key="+node.data.key});
}
);

Основные атрибуты и события Dynatree

Атрибутов и событий, которые можно определить в момент инициализации объекта, у плагина Dynatree существует огромное количество. Все их можно обнаружить в документации по ссылке, приведённой выше.

Опция initAjax – одна из наиболее важных, она используется в случае, когда структуру дерева Вы хотите заполнить асинхронным скриптом. Для этого, как в примере необходимо задать название скрипта. Сам скрипт должен возвращать данные в формате json:

[ { "title": "Название1", "isLazy": true, "key": "12345", … }, { … }, … ]

Данная структура данных в формате json отражает описание каждого отдельного элемента(узла) формируемого дерево. Свойств, которые можно задать для каждого узла, также большое количество. Я остановлюсь только на самых основных:

  • title – название узла, которое будет отображаться на экране (для случая представленного на картинке значениями для title служат названия стран, областей и городов)
  • key – уникальный идентификатор узла, по которому к нему можно будет в последствии обратиться на программном уровне
  • isLazy – логическое значение, если оно для узла имеет значение true, тогда при первом открытии узла однократно будет запускаться событие onLazyRead(). В моём примере, как раз, указан возможный вариант динамического формирования содержимого узла с помощью onLazyRead().
Пример реализации многоуровневого дерева элементов с помощью jquery-плагина Dynatree

Как видите, чтобы создать многоуровневое дерево элементов с помощью Dynatree нужно совсем немного кода. В дальнейшем после инициализации с полученным деревом можно производить огромное количество разнообразных манипуляций.

Основные методы Dynatree

Первым делом для обращения к дереву Dynatree надо использовать метод getTree.

var obj_tree = $("#tree").dynatree("getTree");

А дальше можно, например, получить данные активного узла:

var node = obj_tree.getActiveNode();
alert( node.data.title );
alert( node.data.key );

Или, наоборот, можно активировать новый узел по заданному ключу:

var node2 = obj_tree.activateKey( kkk );

Причём метод activateKey – визуально на экране ничего не меняет, он только возвращает указатель на узел дерева. Для визуализации выбора элемента надо выполнить ещё действия:

node2.activate(); – активизирует элемент, выделяя его курсором
node2.focus(); – устанавливает фокус на выбранном элементе, автоматически скроллируя дерево до выбранного узла

В целом принцип работы плагина думаю должен быть понятен. Ну а если у Вас при использовании плагина Dynatree будут проблемы и вопросы, спрашивайте в комментариях – не стесняйтесь. А для начинающих программистов рекомендую изучить основы JQuery

Да и напоследок предупрежу, что jquery-плагин Dynatree является устаревшей версией плагина Fancytree. Как я понял, разработчик, который сделал Dynatree, почему-то при переходе на версию 2.0 решил провести кардинальный ребрендинг и сменить целиком название своего проекта. Поэтому до сих пор последней версией jquery-плагина Dynatree является версия 1.2.5. А все последующие версии уже выпускались под названием Fancytree. Я, к сожалению, об этом узнал, когда уже приладил к своему сайту Dynatree. Поэтому, честно говоря, судить о преимуществах Fancytree над Dynatree не могу. Но всё, что мне надо было я смог реализовать исключительно средствами Dynatree.

Дата публикации: 18.09.2017

К списку гламурных манифестов сообщества «Профессия – делать сайты»