Привет всем хабралюдям. Хочу рассказать вам о замечательной штуке, которая позволяет нарисовать красивую древовидную структуру. На хабре о JsTree, речь шла не один раз, но в основном это были краткие обзоры. Я же хочу рассказать, о нем немного подробнее, потому что этот плагин для jQuery выполняет практически любые задачи, которые можно ассоциировать с деревом.
Итак, официальный сайт данного скрипта: jstree.com, последняя версия на текущий момент 0.9.8
Для минимальной работы (Без поддержки XSLT и Cookies), достаточно подключить три файла:
Общий стиль:
И два js-скрипта:
Само дерево должно быть следующего вида:
Это самый простой вариант. Главное здесь не забыть, что все должно быть в контейнере, а не задавать id, самому элементу ul. И то что внутри тегов li должны быть вложены ссылки. Вообще о всех вариантах источника для формирования дерево, с примерами написано здесь (http://www.jstree.com/reference/_examples/1_datasources.html). В кратце есть следующие возможности:
1. Предопределенный HTML (Predefined HTML)
2. Предопределенный JSON (Predefined JSON)
3. Предопределенный XML (Predefined XML)
4. Загрузка из удаленного XML файла (Loading from file)
5. Подгрузка JSON-данных от удаленного скрипта (Using async loading)
Для способов, который используют данные XML, необходимо еще подключить Sarissa library и jQuery XSLT plugin
JsTree имеет большой гибкий конфиг. Во-первых можно менять темы, причем на лету. По умолчанию есть всего 5 тем. Изменить существующую не составляет никаких проблем, потому что изменение темы сводится к замене картинок и корректировке background-position. Во-вторых, существует более двух десятков callback'ов, что позволяет привязать необходимое действие практически к любому событию. В-третьих, есть правила, в которых можно задать, какие элементы могут быть выбраны, какие кликабельные, можно ли их перетаскивать, удалять и так далее…
Очень удобная вещь — это добавление и удаление на лету. Кроме того, есть контекстное меню, в которое вы можете добавить любой пункт и привязать к нему иконку и функцию. Помимо этого, контекстное меню может быть разным для каждого элемента или групп элементов.
Что я сделал при помощи jsTree
Вообще, написать статью меня побудило два желания: поделиться о том, как работает этот скрипт, потому что я с ним долго мучился, и до этого о jQuery только слышал. А использоваться jsTree меня вынудила поставленная задача на работе. Работаю я у провайдера, и пишу морду для менеджеров, тех. поддержки и так далее. Встала задача, сделать карту оборудования. Т.е. есть циска, от неё идут свитчи, на свитчах другие свитчи и естественно клиенты. Помимо этого при клике на свитч, можно посмотреть информацию о нем, и при надобности изменить, добавить к этому свитчу другой свитч, или удалить его, если он не имеет потомков. Вот чтобы решить эту задачу я и воспользовался jsTree.
Самое сложное было сбор дерева в html-код. Потому что делать, подкачку потомков по ajax'у слишком накладно для базы, так как по клику надо еще забирать информацию о свитче, и о клиентах (2 запроса), поэтому было решено сразу слить таблицу в массив сделать с ней все что нужно. Кроме того, необходимо было реализовать поиск свитчей и клиентов по дереву, что тоже добавляло свои сложности.
В итоге получилось вот такое js-дерево, которое вы видите справа. Иконки взяты из пакета fugue, зеленым выделены доступные свитчи, красным недоступные, синим, с иконкой человека, клиенты. Чтобы создать полностью запланированный функционал, мне пришлось окунуться с головой и в сам jsTree, и в jQuery. Жаль, что не могу дать ссылку, потому что база провайдера закрытая и работает только изнутри.
Я бы с радостью описал более подробно, что можно сделать имея в руках такой инструмент, только знать бы, будет ли это востребованно…
Итак, официальный сайт данного скрипта: jstree.com, последняя версия на текущий момент 0.9.8
Для минимальной работы (Без поддержки XSLT и Cookies), достаточно подключить три файла:
Общий стиль:
<link href="/js/jstree/tree_component.css" type="text/css" rel="stylesheet" />И два js-скрипта:
Само дерево должно быть следующего вида:
<div id="tree">
<ul>
<li><a href="#">Корень 1</a></li>
<ul>
<li><a href="#">Элемент 1</a></li>
<li><a href="#">Элемент 2</a></li>
<li><a href="#">Элемент 3</a></li>
</ul>
<li><a href="#">Корень 2</a></li>
<ul>
<li><a href="#">Элемент 1</a></li>
</ul>
</ul>
</div>
Это самый простой вариант. Главное здесь не забыть, что все должно быть в контейнере, а не задавать id, самому элементу ul. И то что внутри тегов li должны быть вложены ссылки. Вообще о всех вариантах источника для формирования дерево, с примерами написано здесь (http://www.jstree.com/reference/_examples/1_datasources.html). В кратце есть следующие возможности:
1. Предопределенный HTML (Predefined HTML)
2. Предопределенный JSON (Predefined JSON)
3. Предопределенный XML (Predefined XML)
4. Загрузка из удаленного XML файла (Loading from file)
5. Подгрузка JSON-данных от удаленного скрипта (Using async loading)
Для способов, который используют данные XML, необходимо еще подключить Sarissa library и jQuery XSLT plugin
JsTree имеет большой гибкий конфиг. Во-первых можно менять темы, причем на лету. По умолчанию есть всего 5 тем. Изменить существующую не составляет никаких проблем, потому что изменение темы сводится к замене картинок и корректировке background-position. Во-вторых, существует более двух десятков callback'ов, что позволяет привязать необходимое действие практически к любому событию. В-третьих, есть правила, в которых можно задать, какие элементы могут быть выбраны, какие кликабельные, можно ли их перетаскивать, удалять и так далее…
Очень удобная вещь — это добавление и удаление на лету. Кроме того, есть контекстное меню, в которое вы можете добавить любой пункт и привязать к нему иконку и функцию. Помимо этого, контекстное меню может быть разным для каждого элемента или групп элементов.
Что я сделал при помощи jsTree
Вообще, написать статью меня побудило два желания: поделиться о том, как работает этот скрипт, потому что я с ним долго мучился, и до этого о jQuery только слышал. А использоваться jsTree меня вынудила поставленная задача на работе. Работаю я у провайдера, и пишу морду для менеджеров, тех. поддержки и так далее. Встала задача, сделать карту оборудования. Т.е. есть циска, от неё идут свитчи, на свитчах другие свитчи и естественно клиенты. Помимо этого при клике на свитч, можно посмотреть информацию о нем, и при надобности изменить, добавить к этому свитчу другой свитч, или удалить его, если он не имеет потомков. Вот чтобы решить эту задачу я и воспользовался jsTree.
Самое сложное было сбор дерева в html-код. Потому что делать, подкачку потомков по ajax'у слишком накладно для базы, так как по клику надо еще забирать информацию о свитче, и о клиентах (2 запроса), поэтому было решено сразу слить таблицу в массив сделать с ней все что нужно. Кроме того, необходимо было реализовать поиск свитчей и клиентов по дереву, что тоже добавляло свои сложности.
В итоге получилось вот такое js-дерево, которое вы видите справа. Иконки взяты из пакета fugue, зеленым выделены доступные свитчи, красным недоступные, синим, с иконкой человека, клиенты. Чтобы создать полностью запланированный функционал, мне пришлось окунуться с головой и в сам jsTree, и в jQuery. Жаль, что не могу дать ссылку, потому что база провайдера закрытая и работает только изнутри.
Я бы с радостью описал более подробно, что можно сделать имея в руках такой инструмент, только знать бы, будет ли это востребованно…