jQuery.Tree

    Товарищ caffeine искал плагин к jQuery, который делает дерево с чекбоксами, которые имеют три состояния — установленный, снятый и «чуть-чуть установленный». Не нашел, попросил меня написать. Я написал и делюсь со всеми желающими.

    Страница проекта: code.google.com/p/jquery-tree

    Текущая версия: jquery-tree.googlecode.com/files/jquery-tree.tar.gz

    Пример (на народе, потом, может быть, перенесу): max-at-work.narod.ru/jquery.tree.test.html
    Пример с отключенным js: max-at-work.narod.ru/jquery.tree.test.nojs.html

    Использование:

    <head>
      <link rel="stylesheet" type="text/css" href="css/jQuery.Tree.css" />
    </head>
    <body>
      <ul id="tree">
        <li>
          <label><!-- Наличие лейбла критично -->
            <input type="checkbox" />Элемент с чекбоксом
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" />Категория
          </label>
          <ul>
            <li>
              <label>
                <input type="checkbox" />Элемент с чекбоксом
              </label>
            </li>
          </ul>
        </li>
      </ul>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
      </script>

      <script type="text/javascript" src="jQuery.Tree.js">
      </script>
      
      <script type="text/javascript">
        $(document).ready(function(){
          $("#tree").Tree();
        });
      </script>
    </body>


    * This source code was highlighted with Source Code Highlighter.


    Распространяется «как есть», работает в FF3.5, IE8, Chrome 4 (остальные не смотрел).

    Да, на странице гугл-кода можно добавлять фичреквесты, буду смотреть периодически туда.

    Как подсказывают 1x1 и Mikeprosoft, есть плагин с аналогичным функционалом jstree.com. Главное отличие — мой позволяет отправить форму и без js.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 59

      0
      а примерчик можно?
        +6
        Вот так примерно:
        max-at-work.narod.ru/jquery.tree.test.html
          +1
          несколько дней назад искал что-то похожее, очень помогли спасибо
            0
            Пробывал на jQuery 1.6.4
            чекбоксы работают не стабильно (то отмечаються то нет)
            Исправилось путём удаления:

            //Для IE вешаем обработчики на лейбл
            .closest('label').click(function(){
            labelClick(this);
            checkCheckbox($('input:checkbox', this));
            });
          0
          Спасибо!!! очень нужная штука, осталось в вид под нормальное дерево сделать)
            0
            а почему у вас комментарии в utf-8 а html в 1251?
              +2
              Это особенность народа — он отдает в 1251.
              +1
              драг дропа не будет?
                +2
                Будет время — сделаю.
                Да, в гугл-коде можно добавлять фичреквесты, буду смотреть периодически туда.
                +1
                  0
                  это совсем другое, прочтите начало топика
                    +2
                    Тут кагбэ не дерево само по себе важно. Тут важно, чтоб можно было в чекбоксы тыкать. Изначально нужно было для выбора регионов-областей-городов:
                    — выбрали один город — отметилась соотв. область и регион, как «частично выбранные».
                    — выбрали все города в области — пометилась область, как выбранная
                    — сняли все города в области — сняли отметку с области
                    — выбрали все области в регионе — выбрался регион

                    ну и т. д.
                      +4
                      А вот это http://jstree.com/demo/checkbox — разве не то же самое?
                        +1
                        А это в форме не отправишь без js'а =)
                          0
                          эээ… вы как бы уже jQuery заставили юзера скачать и создали свое дерево с его помощью, в чем проблема использования JS..?
                          или это был сарказм?
                          или «типа круто, что форму, созданную JS'ом можно отправить уже без JS?»

                          вообще вещь понравилась
                            +2
                            Нет. Дерево не создается скриптом, оно выводится в html как неупорядоченный список. Чекбоксы тоже есть в html.
                            Скрипты только добавляют более удобное-красивое отображение и расширяют функционал.

                            Посмотрите пример с отключенным js'ом — чекбоксы отметить можно, древовидная структура осталась. Нет кнопок «свернуть/развернуть» и поддерево нельзя выделить щелчком по родительскому чекбоксу.

                            max-at-work.narod.ru/jquery.tree.test.nojs.html
                              +1
                              При отключенном JS не следует делать группу чекбоксом, как мне кажется, ибо поведение формы становится не очевидным.
                                0
                                Да, тут вы, пожалуй, правы.
                        0
                        а как добиться функционала чтобы «кликнул по родителю и потомки не стали отмеченными как „выбранные“? спасибо.
                      0
                      а так, довольно симпатично получилось
                        +1
                        ниче, секси, пока надобности нет но в избранное не помешает
                        • UFO just landed and posted this here
                            0
                            Да, поддерживаю. СSS-спрайт тут точно нужен
                          • UFO just landed and posted this here
                            • UFO just landed and posted this here
                                +1
                                Очевидно, страница остаётся рабочей при отключённом Javascript
                                • UFO just landed and posted this here
                                0
                                То что нужно, спасибо.
                                  0
                                  Да не за что ;-)
                                  +1
                                  У обоих решений (Вашего и jstree.com) есть незначительный но недостаток — у «чекбоксов» нет фокуса, т.е. их нельзя пролистать/ткнуть с клавиатуры.
                                  В Вашем случае это можно решить, т.к. есть закладка в коде (реальный чекбокс за границами видимости).
                                  Достаточно прикрутить еще несколько событий и предусмотреть визуальную часть фокусного элемента.
                                  Как-то так на псевдокоде:
                                  — checkbox.onfocus => (parent label).focus();
                                  — checkbox.onblur => (parent label).unfocus();
                                  — checkbox.onchange => (parent label).change();
                                  — label.onclick => (child checkbox).focus().change();

                                  И было бы неплохо сделать подсвечивание «чекбокса» на onmouseover примерно так, как это сделано у jstree.com
                                    0
                                    Да, про это тоже думал.
                                      0
                                      Еще одно улучшение пришло на ум.
                                      Если сделать все состояния чекбокса CSS-спрайтом, станет немного лучше:
                                      — один запрос на сервер вместо трех;
                                      — очень чуть-чуть, но меньше суммарный объем данных;
                                      — и самое главное — не будет мигания при подгрузке другого состояния в процессе работы.
                                        0
                                        Тоже думал про это, и к тому же чуть выше предложили уже =)
                                        habrahabr.ru/blogs/jquery/77064/#comment_2244897
                                          0
                                          На самом деле, тут больше, имхо, логика/разметка важна, т.к. стили все равно под каждый проект придется подгонять, соответственно, они там только в роли примера.
                                      0
                                      какой браузер используете, уважаемый?
                                      в опере все отлично
                                        0
                                          0
                                          Опера — мой основной браузер для серфинга, поэтому в первую очередь я попробовал в ней (версия 10.10). Потом ФФ, ИЕ8, Хром. Ни в одном нет намека. Скорее всего такое можно увидеть в какой-то из 9-х версий. Там был такой паразитный фрейм на фокусе, кот которого в итоге Опера отказалась из-за многочисленных жалоб от юзеров и разработчиков сторонних JS-компонентов, ибо это было абсолютно не так, как в большинстве остальных браузеров, непредсказуемо, неудобно.
                                          Если оно будет выглядет так, как на скриншоте, то лучше уж никак.
                                            +1
                                            нажмите Shift, и потом управляйте фокусом стрелками.
                                            ваш К.О.
                                              0
                                              OMG! Век живи — век учись. Спасибо за просвещение.
                                              Получается, я всех неосознанно обманул в прошлом комменте. Простите меня великодушно.
                                              Но тем не менее, с другими браузерами вопрос остается открытым.
                                      +1
                                      кмк, при клике по категории было бы логичнее открывать список подкатегорий, а не выделять категорию и всех ее потомков.
                                        0
                                        Спорно. При щелчке по лейблу чекбокса обычно ждут, что отметится чекбокс. Как вариант, можно одновременно с этим разворачивать поддерево, но в моем случае это было не нужно и даже наоборот (т.к. поддерево достаточно большое, и постоянное разворачивание начинает бесить через пару-тройку кликов).
                                        +1
                                        ajax/json?
                                          0
                                          Красиво сделано. Спасибо.
                                            0
                                            Вы хороший
                                              –1
                                              Неплохо, но нужны нативные эвенты :)
                                                0
                                                Немного дополнение к логике. Я думал облегчить себе жизнь этим компонентом, но не получилось. Проблема в том, что визуально, вы родителей как бы тоже отмечаете (квадратик), но при субмите — они не передаются, что несколько не логично, если я отметил детей, то и родитель должен быть отмечен в результирующем массиве на сервере. Можно это как-то реализовать?
                                                  0
                                                  Ну, это не совсем баг, скорее наоборот.

                                                  В этом контроле есть три состояния у чекбокса:
                                                  — не отмеченный (галочка снята) — все дети не отмечены
                                                  — отмеченный (галочка установлена) — все дети отмечены
                                                  — «частично отмеченный» (серый квадратик) — некоторые из детей отмечены или «частично отмечены».

                                                  Т.к. я могу передать только два состояния на сервер (отмеченный и не отмеченный) — то третим пришлось пожертвовать. В моем случае было более логичным, когда «частично отмеченный» передается, как не отмеченный.

                                                  Возможно, стоит сделать переключатель, изменяющий поведение на предложенное вами.
                                                    0
                                                    Просто если без такого переключателя, мне приходится на сервере делать N запросов на каждого ребенка, чтобы отметить в базе родителей, а это лишняя нагрузка.
                                                      0
                                                      хранимая процедура поможет? или реорганизация дерева в виде MPTT алгоритма.
                                                  0
                                                  Еще код немного не валидный, вы переделываете создание чекбоксов, и не валидно в xhtml надо чтобы вконце было />
                                                    0
                                                    Гм, не могли бы вы описать подробнее? Скриптом я только добавляю <span /> перед лейблом каждой группы, и <div /> перед всем деревом. Сами чекбоксы я не трогаю.
                                                      0
                                                      у меня в html выглядит так:
                                                      <input />

                                                      запускаем в браузере, смотрим «Показать сгенерированый код» получаем
                                                      <input>
                                                        0
                                                        Понятно. Это, скорее всего, плагин что то неправильно отображает (см. скриншот). Какой браузер и какой плагин используете для просмотра сгенеренного html? =)



                                                        С другой стороны, после распарсивания html понятие «валидности» неприменимо, т.к. имеет смысл только до преобразования текста в DOM (цель процесса валидации — убедиться, что в исходном файле нет ошибок) =)
                                                    0
                                                    Жаль, что нет готовой инструкции о том, как в процессе генерации развернуть все ветки…

                                                    полез кавырять исходник, что бы дерево не сворачивалось по определенным узлам где еть отмеченные чекбоксы.
                                                      0
                                                      Спасибо огромнейшее maxatwork за скрипт! Очень помог. Я ваш скрипт оптимизировал для работы с большим количеством элементов. Ускорение с 174.382ms до 34.223ms (для дерева из 25835 элементов-чекбоксов). Куда можно выложить код?
                                                      p.s. это еще не предел, можно еще «дожать»
                                                        0
                                                        «174.382ms» == 174s
                                                        т.е. это не дробь, а просто разделители, дабы в цифрах не плутать.
                                                          0
                                                          Оу! Круто! Я про него забыл уже =)
                                                          Да куда угодно — гитхаб, pastebin, хоть на почту мне (в личку отправил).
                                                        0
                                                        Автор, спасибо. Дерево все еще нужно, даже в конце 2012 года )
                                                          0
                                                          жаль с текущей версией jQuery не работает и ошибок вроде не выдаёт, но и работать как должно не работает

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