Главная > Вебмастеру > jsTree. JavaScript jQuery treeview дерево с богатыми возможностями. Часть 1.

jsTree. JavaScript jQuery treeview дерево с богатыми возможностями. Часть 1.

Всех с наступившим 2011 годом и Рождеством! Давненько я ничего не писал, потому что два последних месяца 2010 года выдались весьма напряженными в рабочем плане:). Короче, ближе к делу — пара слов о плагине jsTree. Сразу оговорюсь, эта статья — скорее небольшое введение, здесь не будет никаких технических подробностей, это просто мои впечатления как разработчика от работы с плагином.

Иногда я пилю свою цмску на ASP.NET MVC. Среди всех особенностей ASP.NET MVC сразу бросается в глаза отсутствие таких привычных стандартных аспнетных контролов как Tree, Menu, Grid и прочих, поэтому такие части ты либо пишешь сам, либо используешь чужое, так я и столкнулся с jsTree.
jsTree — это яваскриптовый полностью бесплатный компонент дерева или "treeview", так же упоминается, что он и кроссбраузерный, но "кроссбраузерность" — понятие весьма растяжимое, в ИЕ7+, ФФ3, Хром — работает, мне этого достаточно.

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

Основная проблема заключается в документации. Актуальной версией плагина в настоящее время (на 10.01.2011) является версия v.1.0rc2 от 01 июля 2010, однако, документация, представленная на сайте неактуальна. Во-первых, в ней отсутствует описание большого количества опций, во всяком случае, большинство необходимых вещей пришлось искать по форумам, во-вторых, то, что в документации есть, порой просто не работает, в-третьих, не всегда понятно, на каких объектах вызывать описанные методы. Только путем глубочайшего дебага я смог заставить работать drag-n-drop с серверной частью своего сайта. Свои вопросы по плагину вы можете отправить в баг-трекер, отвечает видимо сам разработчик Ivan Bozhanov, причем достаточно быстро. Вообще, как мне показалось, однотипных вопросов там очень много (видимо по причине плохой документации), поэтому все же стоит потрудиться найти ответ самому, прежде, чем бросаться писать.

В любом случае, у меня нет никаких претензий к разработчику плагина, их просто не может быть, потому что плагин действительно хорош, я просто предупреждаю, с чем вы можете столкнуться, пытаясь использовать его. Несмотря на многочисленные проблемы с документацией, я все равно использую именно это treeview. В скором времени будет вторая публикация о jsTree, в которой будут уже примеры кода. Выражаю благодарность Ivan`у Bozhanov`у за его отличный плагин jsTree.

Categories: Вебмастеру Tags: ,
  1. Юля
    18 января 2011 в 14:41 | #1

    Здраствуйте. Недавно столкнулась с такой задачей — необходимо разместить в веб-приложении страницу с загрузкой дерева элементов. С javascript работаю впервые, поэтому с нетерпернием жду Вашей следующей публикации о применении плагина jstree.

  2. 24 января 2011 в 20:59 | #2

    Здравствуйте, Юлия. На этой неделе постараюсь запостить свои наработки.

  3. Небес
    13 апреля 2011 в 15:12 | #3

    Здраствуйте! Мне тоже понравился этот плагин. Не могли бы Вы поделится опытом?

  4. 14 апреля 2011 в 19:51 | #4

    Что конкретно интересует ?

  5. Небес
    18 апреля 2011 в 12:16 | #5

    Конкретно интересуют примеры написания событий на .NET. Aналогичные примеры на родном сайте на PHP

  6. Андрей
    22 апреля 2011 в 14:38 | #6

    Здравствуйте! Не совсем понял из примера, какие конкретно стили и скрипты надо подключать. При попытке подключить основной скрипт, firebug-м выдается ошибка
    $(«#tree»).tree_component is not a function

  7. Андрей
    22 апреля 2011 в 14:40 | #7

    Точнее, говоря ошибка
    $(«#tree»).tree is not a function

  8. 23 апреля 2011 в 13:02 | #8

    @Небес
    Ну по поводу событий .NET — я использую ASP.NET MVC, соответственно никаких событий я не пишу, поэтому вопрос мне непонятен. Или речь идет о событиях jsTree ? События плагина перечислены на сайте разработчика.

  9. 23 апреля 2011 в 13:06 | #9

    @Андрей

    Подключаю так:

    <script type="text/javascript" src="@Url.Content("~/Scripts/jsTree.v.1.0rc2/jquery.jstree.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Areas/Administrator/Design/strict/css/jsTreeStyles.css")" />

    .

  10. Виталий
    5 мая 2011 в 14:15 | #10

    А у меня чето не получается даже самый простой вариант с «html_data» запустить… Список исчезает куда-то и все… Хорошо бы примеры кода от самых простых, до более сложных…
    Там часть 2 не скоро планируется? 😉

  11. 5 мая 2011 в 18:00 | #11

    Да-да, я думаю заняться ею в ближайшие выходные, а то на самом деле я немного затянул со второй частью:).

  12. Алина
    25 сентября 2013 в 05:59 | #12

    С нетерпением ждем продолжения темы! 🙂

  1. Пока что нет уведомлений.