maxatwork Dec 2 2009 at 17:34

jQuery.Tree

2 min

24K

jQuery*

+62

Comments 59

LeeMiller Dec 2 2009 at 17:38

а примерчик можно?

maxatwork Dec 2 2009 at 17:48

Вот так примерно:
max-at-work.narod.ru/jquery.tree.test.html

Mecid Dec 3 2009 at 13:19

несколько дней назад искал что-то похожее, очень помогли спасибо

beos Dec 23 2011 at 14:01

Пробывал на jQuery 1.6.4
чекбоксы работают не стабильно (то отмечаються то нет)
Исправилось путём удаления:

 //Для IE вешаем обработчики на лейбл

 .closest('label').click(function(){

 labelClick(this);

 checkCheckbox($('input:checkbox', this));

 });

zelenoff Dec 2 2009 at 18:15

Спасибо!!! очень нужная штука, осталось в вид под нормальное дерево сделать)

tzlom Dec 2 2009 at 18:16

а почему у вас комментарии в utf-8 а html в 1251?

maxatwork Dec 2 2009 at 18:46

Это особенность народа — он отдает в 1251.

alexeydg Dec 2 2009 at 18:27

драг дропа не будет?

maxatwork Dec 2 2009 at 18:48

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

1x1 Dec 2 2009 at 19:45

jstree.com?

Stom Dec 2 2009 at 20:00

это совсем другое, прочтите начало топика

maxatwork Dec 2 2009 at 20:03

Тут кагбэ не дерево само по себе важно. Тут важно, чтоб можно было в чекбоксы тыкать. Изначально нужно было для выбора регионов-областей-городов:
— выбрали один город — отметилась соотв. область и регион, как «частично выбранные».
— выбрали все города в области — пометилась область, как выбранная
— сняли все города в области — сняли отметку с области
— выбрали все области в регионе — выбрался регион

ну и т. д.

Mikeprosoft Dec 2 2009 at 20:23

А вот это http://jstree.com/demo/checkbox — разве не то же самое?

maxatwork Dec 2 2009 at 21:06

А это в форме не отправишь без js'а =)

ilyaagron Dec 3 2009 at 14:32

эээ… вы как бы уже jQuery заставили юзера скачать и создали свое дерево с его помощью, в чем проблема использования JS..?
или это был сарказм?
или «типа круто, что форму, созданную JS'ом можно отправить уже без JS?»

вообще вещь понравилась

maxatwork Dec 3 2009 at 15:06

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

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

max-at-work.narod.ru/jquery.tree.test.nojs.html

Guria Dec 3 2009 at 15:40

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

maxatwork Dec 3 2009 at 15:49

Да, тут вы, пожалуй, правы.

wpm1 Apr 26 2010 at 11:57

а как добиться функционала чтобы «кликнул по родителю и потомки не стали отмеченными как „выбранные“? спасибо.

Stom Dec 2 2009 at 20:01

а так, довольно симпатично получилось

Sef4eg Dec 3 2009 at 12:48

ниче, секси, пока надобности нет но в избранное не помешает

UFO just landed and posted this here

SolarSoul Dec 3 2009 at 13:43

Да, поддерживаю. СSS-спрайт тут точно нужен

UFO just landed and posted this here

kolpeex Dec 3 2009 at 14:09

Очевидно, страница остаётся рабочей при отключённом Javascript

UFO just landed and posted this here

linas Dec 3 2009 at 14:17

То что нужно, спасибо.

maxatwork Dec 3 2009 at 14:18

Да не за что ;-)

pxx Dec 3 2009 at 14:35

У обоих решений (Вашего и 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

maxatwork Dec 3 2009 at 14:54

Да, про это тоже думал.

pxx Dec 3 2009 at 19:03

Еще одно улучшение пришло на ум.
Если сделать все состояния чекбокса CSS-спрайтом, станет немного лучше:
— один запрос на сервер вместо трех;
— очень чуть-чуть, но меньше суммарный объем данных;
— и самое главное — не будет мигания при подгрузке другого состояния в процессе работы.

maxatwork Dec 3 2009 at 22:44

Тоже думал про это, и к тому же чуть выше предложили уже =)
habrahabr.ru/blogs/jquery/77064/#comment_2244897

maxatwork Dec 3 2009 at 22:46

На самом деле, тут больше, имхо, логика/разметка важна, т.к. стили все равно под каждый проект придется подгонять, соответственно, они там только в роли примера.

danilissimus Dec 3 2009 at 15:17

какой браузер используете, уважаемый?
в опере все отлично

danilissimus Dec 3 2009 at 15:26

i036.radikal.ru/0912/9a/3df893413a79.png
ссылку забыл

pxx Dec 3 2009 at 18:55

Опера — мой основной браузер для серфинга, поэтому в первую очередь я попробовал в ней (версия 10.10). Потом ФФ, ИЕ8, Хром. Ни в одном нет намека. Скорее всего такое можно увидеть в какой-то из 9-х версий. Там был такой паразитный фрейм на фокусе, кот которого в итоге Опера отказалась из-за многочисленных жалоб от юзеров и разработчиков сторонних JS-компонентов, ибо это было абсолютно не так, как в большинстве остальных браузеров, непредсказуемо, неудобно.
Если оно будет выглядет так, как на скриншоте, то лучше уж никак.

danilissimus Dec 3 2009 at 18:56

нажмите Shift, и потом управляйте фокусом стрелками.
ваш К.О.

pxx Dec 3 2009 at 19:07

OMG! Век живи — век учись. Спасибо за просвещение.
Получается, я всех неосознанно обманул в прошлом комменте. Простите меня великодушно.
Но тем не менее, с другими браузерами вопрос остается открытым.

VladimirAndreev Dec 3 2009 at 14:44

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

maxatwork Dec 3 2009 at 14:56

Спорно. При щелчке по лейблу чекбокса обычно ждут, что отметится чекбокс. Как вариант, можно одновременно с этим разворачивать поддерево, но в моем случае это было не нужно и даже наоборот (т.к. поддерево достаточно большое, и постоянное разворачивание начинает бесить через пару-тройку кликов).

WebDev Dec 3 2009 at 15:19

ajax/json?

IDMan Dec 3 2009 at 15:22

Красиво сделано. Спасибо.

Cellard Dec 3 2009 at 18:17

Вы хороший

zeromodule Dec 4 2009 at 02:23

Неплохо, но нужны нативные эвенты :)

-1

kvf77 Dec 5 2009 at 14:01

Немного дополнение к логике. Я думал облегчить себе жизнь этим компонентом, но не получилось. Проблема в том, что визуально, вы родителей как бы тоже отмечаете (квадратик), но при субмите — они не передаются, что несколько не логично, если я отметил детей, то и родитель должен быть отмечен в результирующем массиве на сервере. Можно это как-то реализовать?

maxatwork Dec 5 2009 at 18:14

Ну, это не совсем баг, скорее наоборот.

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

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

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

kvf77 Dec 6 2009 at 14:50

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

wpm1 Apr 26 2010 at 11:59

хранимая процедура поможет? или реорганизация дерева в виде MPTT алгоритма.

kvf77 Dec 5 2009 at 14:28

Еще код немного не валидный, вы переделываете создание чекбоксов, и не валидно в xhtml надо чтобы вконце было />

maxatwork Dec 5 2009 at 18:18

Гм, не могли бы вы описать подробнее? Скриптом я только добавляю <span /> перед лейблом каждой группы, и <div /> перед всем деревом. Сами чекбоксы я не трогаю.

kvf77 Dec 6 2009 at 14:27

у меня в html выглядит так:
<input />

запускаем в браузере, смотрим «Показать сгенерированый код» получаем
<input>

maxatwork Dec 6 2009 at 18:00

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

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

Ar2r Jun 11 2010 at 15:30

Жаль, что нет готовой инструкции о том, как в процессе генерации развернуть все ветки…

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

RubtsovAV Jun 4 2012 at 04:52

Спасибо огромнейшее maxatwork за скрипт! Очень помог. Я ваш скрипт оптимизировал для работы с большим количеством элементов. Ускорение с 174.382ms до 34.223ms (для дерева из 25835 элементов-чекбоксов). Куда можно выложить код?
p.s. это еще не предел, можно еще «дожать»

RubtsovAV Jun 4 2012 at 04:57

«174.382ms» == 174s
т.е. это не дробь, а просто разделители, дабы в цифрах не плутать.

maxatwork Jun 15 2012 at 21:33

Оу! Круто! Я про него забыл уже =)
Да куда угодно — гитхаб, pastebin, хоть на почту мне (в личку отправил).

garbuz Dec 3 2012 at 18:04

Автор, спасибо. Дерево все еще нужно, даже в конце 2012 года )

Glook Dec 10 2014 at 20:29

жаль с текущей версией jQuery не работает и ошибок вроде не выдаёт, но и работать как должно не работает

Show the best of all time