rdTree — DHTML-дерево на MooTools


    Многим разработчикам рано или поздно приходилось иметь дело с древовидным списком, который нужно включить в проект и представить пользователю в удобном дизайне.

    Это может быть help, справочная информация, быстрая навигация по админ-панели, древовидное меню и т.д. Пользователю такая организация навигации понятна, так как она реализивана во всех операционных системах.

    Поиск хороших решений неприменно приводил к красиво оформленным и хорошо документированыи коммерческим библиотекам, например Zapatec Tree. За unlimited версию там просит 799$.

    Дорого! Будем поддерживать разработчиков свободного ПО и искать хорошо написанное дерево на JavaScript.



    Составим список интересных бесплатных решений (без всяких там «unlimited with link back») и проанализируем функционал.

    Toolbox — DHTML Tree


    Ссылка глючит из-за 'script': www.mattkruse.com/javascript/mktree
    Классический пример, копирайты к скрипту больше чем сам скрипт. Включил в обзор, так как скрипт учит базовым правилам построения дерева. С дизайном у него не очень, но для поисковиков дерево построено грамотно.





    Simple Tree Menu


    Простая реализация дерева. Главное достоинство — компактность и простота. Дерево задается в принятом для такого рода программ виде.






    Destroydrop Javascripts Tree


    Ссылка глючит из-за 'script': destroydrop.com/javascripts/tree

    Не использует фреймворк-и, написано 5 лет назад, аккуратное и компактное дерево.
    Есть документация и примеры. Из минусов: чистый JavaScript — проблемы с индексацией,
    не развивается с 2003 года.
    Модификацию этого скрипта встречал в некоторых коммерческих CMS.




    mygosuMenu / DynamicTree



    Функционал схожий с Destroydrop Tree, но есть существенное отличие — дерево задается уже в понятной для индексации форме.
    Скрипт «легкий» и не использует фреймворков.




    jQuery — treeView Basic



    Немного примитивное, но здесь ставка на простоту и минимализм в коде (без учета кода самого фреймворка). При скролинге в Explorer-е заметны глюки.
    Текс дерева задается в хорошем для индексации виде.






    jQuery plugin: Treeview



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




    Ext.tree



    Отличная реализация дерева. Drag'n'drop, ajax, даже шаблон фотоальбома. Дерево
    «тяжеловато» по объему кода, нету переноса длинных строк.
    Отличная документация.




    Mootools — Mif.Tree



    Хорошая реализация дерева. Есть drag'n'drop, хорошая документация. Пожалуй, самый
    богатый функционал из перечисленных реализаций дерева.
    Есть только один недостаток — дерево задается в JavaScript в формате JSON, следовательно, с индексацией такого дерева будут проблемы. В дереве не реализованы переносы строчек.
    Идеальное решение для использования в админ-панели.




    Mootools — RIA DHTML Tree



    Собственно это моя реализация дерева. Не корректно будет оценивать ее мне, поэтому напишу только то, что я реализовал:
    1. Дерево задается в классическом виде с помощью списков ul li. Это важно для нормальной индексации поисковиками.
    2. Если в ветке длинный текст, то реализован механизм переноса строчек. (Пришлось потратить значительную часть времени, чтоб это заработало во всех популярных браузерах)
    3. Дерево реализизует, на мой взгляд, самую необходимую базовую функциональность, и поэтому является компактным.
    4. В узел дерева можно вставить любой html, заключенный в тег a, например
      Имя поля:
      Заложил механизм простого написания плагинов для адаптпции дерева под «запросы» заказчика.




    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 45
    • 0
      Спасибо за статью.
      Как раз собирался делать FAQ для сайта - думал заказывать с нуля написание раздела, так оказывается всё можно просто нагенерить программами.
      • 0
        Спасибо за поддержку, почему-то статью заминусовали. Рад что кому то она помогла.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Я уменьшил размер дива, теперь если раскрыть дерево, вы сможнте увидеть переносы строчек.
        • +1
          Тема немного некорректная. Тут приведены же не только деревья для Mootools.
          Странно, что нет в списке mooTree (mootree.mindplay.dk).
          • 0
            Да, этот тоже хороший модуль, спасибо что ниписали, сейчас сделаю скриншоты и добавлю в обзор.
          • +1
            Приятный обзор. Разве что возможно стоило бы для каждой версии чётче прописать наличие-отсутствие таких фишек как динамическая загрузка нодов, DnD, checkboxes, custom nodes и т.д.

            И ещё: "не умеет переносить строчки елемента узла" глаза режет. И с ошибкой, и непонятно. :)
            • 0
              Уже поправил, спасибо за замечание. Имелось ввиду если в ветке длинный текст, не предусмотрен перенос строк.
            • 0
              А еще хотелось бы увидеть оценки производительности. Какого размера дерево с каким уровнем вложенности оно переваривает без тормозов юзер интерфейса, плюс наличие поддержки клавиатуры. На последнее, как ни странно, большинство писателей компонент забивают большой болт, а без нее компонент не может претендовать на использование в серьезных проектах. ИМХО
              • 0
                Вначале писал статью о своей реализации дерева, и понял что без небольшого обзора других модулей статья будет менее полезна читателям habra.

                Т.к. модулей на mootools не так уж и много, включил в обзор другие фреймворки.

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

                Раз я уже взялся за это дело, напишу тесты, добавлю оценку по поддежке клавиш управления, динамической загрузке нодов, DnD, checkboxes, custom nodes и опубликую вторую (расширенную) часть обзора и назову ее "Обзор DHTML-деревьев на JavaScript".
                • 0
                  Не забудьте "сохранение открытых узлов в куках".
              • +1
                Спасибо за обзорчик, открыл для себя Mif.Tree - на первый взгляд отличная штука!
                Вот еще одна реализация дерева: Alder Tree
                • 0
                  Рекомендую добавить в статью замечательный dTree (http://destroydrop.com/javascripts/tree/).
                  • 0
                    Он третий в списке Destroydrop Javascripts Tree
                  • 0
                    Ну конечно про Yahoo Tree View вы не написали...
                    • 0
                      есть ещё куча бесплатных вариантов на GWT, но его нельзя назвать js-фреймворком
                      • 0
                        а они все генерят такой же валидный, удобный для поисковиков и стилизации код, как gwt-Tree?
                        • 0
                          ну со стилизацией и валидностью проблем нет, а вот насчёт поисковиков вы, увы, правы
                          • 0
                            Смотрю в код, который мне только что выплюнул gwt-Tree.
                            <span style="white-space: nowrap;">
                            <div style="white-space: nowrap; margin-left: 16px;">
                            ...
                            </div>
                            </span>
                            Что же тут валидного? =)

                            p.s. и оффтоп: я подозреваю, что мы можем быть заочно знакомы по пунку, поэтому можно без "вы".
                            • 0
                              если честно, то я с валидаторами плохо знаком, но не очень сложную gwt-страницу вроде бы w3c xhtml валидатор валидировал.
                              плохая часть - это "white-space: nowrap;"?

                              зы возможно(я в этом году ПМ окончил)
                              • 0
                                Плохая часть — это блочный элемент (<div>) внутри строчного (<span>).
                      • 0
                        еше есть jQuery SimpleTree Drag&Drop, демо
                        • 0
                          еше есть jQuery SimpleTree Drag&Drop
                          http://news.kg/wp-content/uploads/tree/index_ru.html
                          http://news.kg/wp-content/uploads/tree/d&d/
                          • +1
                            Спасибо за такой обзор! Как вы удачно подметили: "Многим разработчикам рано или поздно приходилось иметь дело с древовидным списком". Самое место в закладках!
                            Когда передо мной встала задача реализовать дерево, то я для себя почему-то, решил: "JavaScript'а будет по-минимому". Переделал Лебедевсое дерево с ветками. Плюс добавил возможность сохранять состояние дерева в cookie. При Открытии/закрытии и записи в cookie используется JavaScript, а в остальном — CSS+HTML.
                            • –1
                              в избранное. мутулс рулез
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • 0
                                  Хороший у вас источник. :-)
                                • –1
                                  Деревья в пользовательском интерфейсе - большое зло.
                                  • 0
                                    У меня коннект отвалился, я аргументацию не написал.
                                    Естественно сложнее сделать поиск с автоподстановкой, чем залепить дерево-рубрикатор, но дерево не решает проблемы быстрого поиска нужной информации и ломает отношения многие-ко-многим.

                                    Если вы по какой-то причине используете дерево на сайте, значит вы не смогли решить задачу удобного представления информации (напоминаю, что мы говорим о сайтах). Уверен, что большинство пользуется индексом в справочной системе, а вовсе не оглавлением.

                                    Дерево - это выражение лени дизайнера интерфейса.
                                    • 0
                                      подписываюсь. Ещё добавлю: большинство дизайнеров вообще не догадываются, что на клавиатуре есть управляющие клавиши и с помощью них можно также пользоваться браузером, а не тыкать мышкой по деревьям и прочим модным красивостям. Таким стоит ознакомиться с Web Accessibility Initiative
                                      • +1
                                        Не всегда требуется "дерево-рубрикатор". Мне было необходимо реализовать интеллектуальную маршрутизацию вызовов, которая по-сути, и представляет собой древовидную структуру. Каким же образом, если не в виде дерева отображать информацию о маршрутизации?
                                        С вами согласен только частично. Предложение "Если вы по какой-то причине используете дерево на сайте, значит вы не смогли решить задачу удобного представления информации (напоминаю, что мы говорим о сайтах)" звучит очень категорично.
                                        • 0
                                          Скриншот вашего дерева можно? Правда интересно.
                                          • 0
                                            Ничего особенного в дереве нет. Но уважу ваше любопытство =)
                                            screen
                                            Рисунок представляет собой профиль по которому строится маршрутизация.
                                            Прошу не пинать меня: я не дизайнер. Проект пока в разработке. Маршрутизация представляет собой не граф, а именно дерево. Хотелось предоставить пользователю в максимально интуитивно-понятном виде.
                                            • 0
                                              Спасибо! Я правильно понимаю, что дерево представляет собой ветвящийся алгоритм маршрута телефонного звонка, аля я позвонил в колл-центр, а мне говорят "чтобы .. нажмите 1, чтобы ... нажмите 2"?
                                              • 0
                                                Да, вы всё поняли совершенно верно. Но только не в Call-центр. Будет реализована услуга "Виртуальный офис" в одной из фирм. Любой желающий сможет купить вирт. номер и задать необходимый для него алгоритм маршрутизации.
                                                Пока только по предположениям, деревья будут не очень "разлапистыми" =) Так что, как мне кажется, выбранный способ отображения вполне годиться.
                                                P.S.: если я допустил ошибку или не прав, то хотелось бы, чтобы вы мне объяснили, был бы рад и благодарен. Но мне почему-то кажется, что другой способ был бы не очень удобен.
                                                • 0
                                                  Тогда я порекоммендую вам вот что:
                                                  Обратите внимание на GUI для Lego Mindstorms и Эппловский Finder, мне кажется, что вы почерпнете оттуда массу интересных идей, которые в итоге дадут вашему проекту конкурентное приемущество перед вашим оппонентами. Ведь они, наверняка свято верят в "удобство" деревьев.
                                                  • 0
                                                    Оппоненты, если честно, должны будут нервно курить в сторонке, уступать по функционалу значительно.
                                                    Если честно, вы меня не убедили =) Может, я просто ничего не понял... У поиска с автоподстановкой как мне видится, есть минусы, с которыми столкнулся на практике.
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          • 0
                                            > то деревья разделов и т.п. давно стали привычной частью всевозможных админок
                                            Потому что один сделал, и за ним потянулись все. В истории веб-дизайна миллион случаев следования неверному примеру.

                                            > в случае, когда юзер впервые погружается в тему и не знает, что искать, он ему не поможет:)
                                            Высосано из пальца. Ситуация про сферического коня в вакууме.

                                            > который оптимально подходит для конкретной задачи и структуры данных.
                                            Не путайте структуру и представления. Юзера врядли волнуют зависимости таблиц в вашей БД.

                                            > Что касается поиска с автоподстановкой (кстати, сделать его не сложнее, чем качественное дерево с постепенной подгрузкой подветвей)
                                            А я не про техническую сторону говорю, а про правильный алгоритм поиска, решающий задачу. Вы думаете пользователь будет переться от того, что у вас дерево ветви динамически подгружает?

                                            > огулом хаять все остальное.
                                            Вы уверены что понимаете смысл выражения "хаять огулом"?
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                              • 0
                                                Интерфейс решает задачу, задача не сводиться к выводу данных - она гораздо шире.
                                                А вы привязались к деревьям и плоским спискам.

                                                А я не буду делать сайт с кучей подразделов (и пользователю не дам), чтобы потом не делать в админке дерева. Вот так я избавляюсь от дерева.
                                        • 0
                                          http://nickmitin.habrahabr.ru/blog/48003… - я вот даже топик сделал, так сказать, о наболевшем.
                                          • 0
                                            Спасибо за комплимент.
                                            Справедливости ради - у нас есть и бесплатная версия.
                                            Андрей Кулинич - разработчик Zapatec.Tree
                                            • 0
                                              Нельзя назвать бесплатной программу, которая в замен за свою "бесплатность" что-то требует (в Вашем случае обратный линк).

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