jQuery.Tree

[LeeMiller]

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

[maxatwork]

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

[Mecid]

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

[beos]

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

//Для IE вешаем обработчики на лейбл
.closest('label').click(function(){
labelClick(this);
checkCheckbox($('input:checkbox', this));
});


[zelenoff]

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

[tzlom]

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

[maxatwork]

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

[alexeydg]

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

[maxatwork]

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

[1x1]

jstree.com?

[Stom]

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

[maxatwork]

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

ну и т. д.

[Mikeprosoft]

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

[maxatwork]

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

[ilyaagron]

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

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

[maxatwork]

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

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

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

[Guria]

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

[maxatwork]

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

[wpm1]

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

[Stom]

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

[Sef4eg]

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

[SolarSoul]

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

[kolpeex]

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

[linas]

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

[maxatwork]

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

[pxx]

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

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

[pxx]

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

[maxatwork]

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

[maxatwork]

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

[danilissimus]

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

[danilissimus]

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

[pxx]

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

[danilissimus]

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

[pxx]

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

[VladimirAndreev]

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

[maxatwork]

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

[WebDev]

ajax/json?

[IDMan]

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

[Cellard]

Вы хороший

[zeromodule]

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

[kvf77]

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

[maxatwork]

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

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

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

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

[kvf77]

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

[wpm1]

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

[kvf77]

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

[maxatwork]

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

[kvf77]

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

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

[maxatwork]

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



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

[Ar2r]

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

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

[RubtsovAV]

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

[RubtsovAV]

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

[maxatwork]

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

[garbuz]

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

[Glook]

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