Иерархия из CheckBox

Статус
Закрыто для дальнейших ответов.

minarett

Новичок
Регистрация
22.02.2010
Сообщения
3
Доброго времени суток. Задача следующая: есть иерархическая структура, состоящая из ветвей "Разделы", "Категории", "Подкатегории". Выбор нужно реализовать через CheckBox'ы в HTML, в общем, с этим проблем не возникает - структуру я вывожу. Но есть нюанс:
Всего 20 разделов, в каждом из которых где-то 15-40 категорий, в каждой из которых еще под 50 подкатегорий. Значит, изначально должны появиться только чекбоксы разделов. По клику на чекбоксе нужного раздела должны под ним появиться категории. И, соответственно, по клину на категории должны появиться подкатегории. Как скрывать\отображать объект по клику на чекбоксе? Только, плиз, без мануалов - сдаю сайт, это - последнее, что осталось сделать. А то форма жуть какая здоровая получается...
Заранее благодарен всем ответившим в тему...
 

Serg@NT

Well-Known Member
Регистрация
20.02.2010
Сообщения
506
Вам код нужен или алгоритм?
Алгоритм.
Ставите чекбоксы с иерархическими именами.
Например:
категория: name="cat1", cat2 ...
подкатегирии: cat1_1, cat1_2, ... cat2_1, cat2_2,...
подподкатегории: cat1_1_1, cat1_1_2, ...
и т.п.
Потом отображаете категорию с чекбоксом, под ней <div id="cat1" style="display: none;"></div> (id дива = name чекбокса)
В чекбоксах делаете событие onclick="showCat(this.name)"
И функцию javascript:
function showCat(catname){
if(catname.checked) document.getElementById(catname.name).style.display = 'block'; //или просто ''
else document.getElementById(catname.name).style.display = 'none';
}
В функции я добавил проверку чекбокса. Если он отмечен, отображается див, если нет - скрывается.

Ну, вот, как-то так, если наспех алгоритм. Если нужен код, то пишите.
 

minarett

Новичок
Регистрация
22.02.2010
Сообщения
3
Огромное спасибо за ответ. Все понял - правда, сейчас пробую, не получается... Если есть такая возможность - просто набросайте исходник формы с одним чекбоксом, показывающим один блок DIV.

Может быть, я сильно туплю т. к. давненько уже не спал, но такая конструкция кажется мне правильной и не работает... (Я - программист C++, PHP, разработчик БД, с JavaScript вообще никогда не работал, это - шабашка небольшая выпала, просто)

Код:
<HTML>
<BODY>
<script TYPE="text/javascript">
function showCat(catname){
if(catname.checked) document.getElementById(catname.name).style.display = 'block';
else document.getElementById(catname.name).style.display = 'none';
}
</SCRIPT>
<INPUT TYPE="checkbox" ID="CAT_1" NAME="CAT_1" ONCLICK="showCat(this.name);" />
<DIV ID="CAT_1" STYLE="DISPLAY:NONE">HERE SOMEONE</DIV>
</BODY>
</HTML>
 

Serg@NT

Well-Known Member
Регистрация
20.02.2010
Сообщения
506
Почти правильно. У меня ещё пара косяков было :blush: . Просто не проверял в деле.
Вот ваш код, немного исправленный:
Код:
<html>
<body>
<script type="text/javascript">
function showCat(catname){
if(catname.checked) document.getElementById("div_"+catname.name).style.display = 'block';
else document.getElementById("div_"+catname.name).style.display = 'none';
}
</script>
<input type="checkbox" name="cat_1" onclick="showCat(this);" />
<div id="div_cat_1" style="display:none">here someone</div>
</body>
</html>
Здесь в id дива ещё добавил "div_", т.к. IE почему-то не различает id и name, если они одинаковые у разных элементов, хотя в остальных браузерах работало. Good old Microsoft, как говорят американцы. :)

Пара советов:
- В Javascript следите за регистром, т.к. это регистрозависимый язык, т.е. cat_1 и CAT_1 - разные вещи;
- у чекбоксов id указывать не нужно, только name. Также следите, чтоб у всех элементов id было уникальным, иначе не будет работать (ну и "спешал фор майкрософт", чтоб id дива отличалось от name чекбокса - поэтому я добавил к нему "div_...").
- и вообще, в коде лучше не увлекаться капсом :) Работать будет, но просто в стандартах разметки от него отказались, типа дурной тон.

Да, ещё, "style.display = 'block'" отображает div в виде блока, т.е. с переходом на другую строку и занимающим всю строку (справа от него ничего не отображается). В этом примере, как видите, текст отображается под чекбоксом. Насколько я помню, так дивы отображаются по умолчанию. Если вы хотите, чтоб он отображался в строчку с чекбоксом, замените в javascript функции на "style.display = 'inline';"
 

minarett

Новичок
Регистрация
22.02.2010
Сообщения
3
Почти правильно. У меня ещё пара косяков было :blush: . Просто не проверял в деле.
Вот ваш код, немного исправленный:
Код:
<html>
<body>
<script type="text/javascript">
function showCat(catname){
if(catname.checked) document.getElementById("div_"+catname.name).style.display = 'block';
else document.getElementById("div_"+catname.name).style.display = 'none';
}
</script>
<input type="checkbox" name="cat_1" onclick="showCat(this);" />
<div id="div_cat_1" style="display:none">here someone</div>
</body>
</html>
Громадное спасибо, +10 за этот пост(но система рейтинга отключена, так что, если скажете куда - перешлю немножко денежки на пиво=) ). Все еще не спал, сильно притормаживаю, не могли бы Вы помочь с реализацией цикла, рисующего эту структуру? Здесь, я думаю, достаточно будет алгоритма. Хотя, код тоже приветствуется.
Значит, дело обстоит так: Таблица Разделов(ИД, Имя раздела), Таблица Категорий(ИД, Имя категории, Родит. Раздел, Родит. Категория). В первой таблице хранится только информация о разделах, во второй - категории, привязанные к разделам со всеми вложенными подкатегориями. Что-то никак не могу описать этот скрипт на PHP... Работу с базой можно не описывать - я использую собственные классы, а вот алгоритм визуализации - желательно.

Здесь в id дива ещё добавил "div_", т.к. IE почему-то не различает id и name, если они одинаковые у разных элементов, хотя в остальных браузерах работало. Good old Microsoft, как говорят американцы. :)

Пара советов:
- В Javascript следите за регистром, т.к. это регистрозависимый язык, т.е. cat_1 и CAT_1 - разные вещи;
- у чекбоксов id указывать не нужно, только name. Также следите, чтоб у всех элементов id было уникальным, иначе не будет работать (ну и "спешал фор майкрософт", чтоб id дива отличалось от name чекбокса - поэтому я добавил к нему "div_...").
- и вообще, в коде лучше не увлекаться капсом :) Работать будет, но просто в стандартах разметки от него отказались, типа дурной тон.

Да, ещё, "style.display = 'block'" отображает div в виде блока, т.е. с переходом на другую строку и занимающим всю строку (справа от него ничего не отображается). В этом примере, как видите, текст отображается под чекбоксом. Насколько я помню, так дивы отображаются по умолчанию. Если вы хотите, чтоб он отображался в строчку с чекбоксом, замените в javascript функции на "style.display = 'inline';"
Громадное спасибо, +10 за этот пост(но система рейтинга отключена, так что, если скажете куда - перешлю немножко денежки на пиво=) ). Все еще не спал, сильно притормаживаю, не могли бы Вы помочь с реализацией цикла, рисующего эту структуру? Здесь, я думаю, достаточно будет алгоритма. Хотя, код тоже приветствуется.
Значит, дело обстоит так: Таблица Разделов(ИД, Имя раздела), Таблица Категорий(ИД, Имя категории, Родит. Раздел, Родит. Категория). В первой таблице хранится только информация о разделах, во второй - категории, привязанные к разделам со всеми вложенными подкатегориями. Что-то никак не могу описать этот скрипт на PHP... Работу с базой можно не описывать - я использую собственные классы, а вот алгоритм визуализации - желательно.

Ах да, забыл - на выходе мне нужно получить массив Разделов и Категорий для последующего сохранения в БД
 

Serg@NT

Well-Known Member
Регистрация
20.02.2010
Сообщения
506
Вот, см. вложенный файл.
Не понял насчёт массива. На выходе - это где? Выдать те, у которых чекбоксы отмечены?
Тогда вот в чекбоксах я указал value="<?= $row['name'] ?>", т.е. значением чекбоксов будут названия категорий.
А после возврата формы:
$arr = array();
foreach($_POST as $key => $value) {
if(substr($key, "cat_")) $arr[] = $value;
}
Здесь в массив передаются значения всех элементов, имеющих в имени "cat_". Если чекбокс не был отмечен, то его значение не передаётся.
ЗЫ: в substr порядок атрибутов может быть наоборот, т.е. может быть substr("cat_", $key), не помню точно в каком языке как :). Главное, надо найти вхождение строки "cat_" в строку $key (ключ массива $_POST).

ЗЗЫ: "на пиво" можно прислать на WM R619381109311 :)
 

Вложения

Статус
Закрыто для дальнейших ответов.
Верх Низ