jsTree — Правильное дерево

    Привет всем хабралюдям. Хочу рассказать вам о замечательной штуке, которая позволяет нарисовать красивую древовидную структуру. На хабре о JsTree, речь шла не один раз, но в основном это были краткие обзоры. Я же хочу рассказать, о нем немного подробнее, потому что этот плагин для jQuery выполняет практически любые задачи, которые можно ассоциировать с деревом.


    image
    Итак, официальный сайт данного скрипта: 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. Жаль, что не могу дать ссылку, потому что база провайдера закрытая и работает только изнутри.

    Я бы с радостью описал более подробно, что можно сделать имея в руках такой инструмент, только знать бы, будет ли это востребованно…
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 6

      –1
      Вы забыли запятую между «дерево» и «ip-адрес» на картинке.
        +1
        Или «ов» у «адресов» :)
        0
        Да что угодно можно сделать с таким деревом, я применю для дерева разделов, чтобы отмечать галками доступные определенному пользователю. www.jstree.com/demo/checkbox

        Проблем с выводом древовидной структуры у меня нет, т.к. использую XSLT.
          0
          Изначально загружать всех клиентов в такое дерево всё же накладно, так что присмотритесь к асинхронной загрузке ветвей, всё равно рано или поздно придётся.

          Добавлю про удобный поиск (в том числе и при асинхронной загрузке, правда неэффективно, с кучей запросов). Ввести адрес и автоматически раскрыть/загрузить ветвь до него — использующие дерево оценят.
            0
            Не так давно решал подобную проблему) Сделал как-то по сложному через CSS и JS. А тут всего одна строчка,
            $("#tree").tree();

            Добавлю в избранное.
              0
              пользую его

              Only users with full accounts can post comments. Log in, please.