войти зарегистрироваться

Web-разработка whois

индекс
184,85

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

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

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

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

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

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

Toolbox - DHTML Tree

Ссылка глючит из-за 'script': http://www.mattkruse.com/javascript/mktree/

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



Simple Tree Menu

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



Destroydrop Javascripts Tree

Ссылка глючит из-за 'script': http://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, например <a>Имя поля: <input type="text" name="name"></a>
  5. Заложил механизм простого написания плагинов для адаптпции дерева под "запросы" заказчика.
Пример работы RIA DHTML Tree.

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

Буду признателен разработчикам, которые предложат свой вариант дизайна дерева, обещаю выложить Ваш вариант на страничку проекта с указанием автора.

+1
30 июля 2008, 03:01
apelsyn

комментарии (45)

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

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

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

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

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

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

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

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

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

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

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

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

          > огулом хаять все остальное.
          Вы уверены что понимаете смысл выражения "хаять огулом"?
          • >Потому что один сделал, и за ним потянулись все.
            Потому что для иерархических структур это действительно удобно. Если бы это не было удобно, даже Майкрософту не удалось бы пропихнуть свою «универсальную консоль администрирования» (с деревом администрируемых сущностей в левой панели) в качестве образца для подражания.

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

            > Не путайте структуру и представления. Юзера врядли волнуют зависимости таблиц в вашей БД.
            Не я начал :). БД, конечно, ни при чем, но представление должно быть адекватно модели, а не притянуто за уши (конечно, все можно представить плоским списком, но нафига?).

            > про правильный алгоритм поиска
            Поиск — далеко не главная задача дерева. Для поиска, конечно, нужен поиск. Но посмотрел бы я, как вы с помощью поиска реализуете аналог админки структуры с перетягиваемыми ветвями :).
            • Интерфейс решает задачу, задача не сводиться к выводу данных - она гораздо шире.
              А вы привязались к деревьям и плоским спискам.

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