Begin
Делаем каталог. Понадобилось сделать дерево категорий товара/фирм/услуг с бесконечной вложенностью. Каждую категорию можно отметить чекбоксом, чтобы потом можно было получить список/массив всех отмеченных категорий (например для поиска по ним).
Написал такое вот деревце. Реализовал в виде плагина к любимому JQuery )
Что умеет:
- Если указан пустой див — загружает из указанного скрипта все категории, и подкатегории(вложенные ul, если li имеет класс folder и не имеет вложенного списка(ul) — дерево будет автоматом подгружать этот список из указанного скрипта с указанной глубиной рекурсии(это забота скрипта выдавать запрашиваемые данные с требуемыми параметрами).
- Если указан готовый список — то можно сворачивать/разворачивать подкатегории, отмечать нужные, которые будут подсвечены заданным классом
- Получать выбранные номера категорий (value чекбоксов) в массиве
- Возможность поиска по всем загруженным веткам дерева, вывод результата поиска в указанный див(указывается див для поиска, в котором строка для ввода запроса + див(пустой) для вывода результатов)
- Число результатов поиска можно ограничить (в параметрах)
- При клике на одном из найденных результатов — дерево открывается чтобы отобразить заданную ветку и она подсвечивается классом(указывается в параметрах)
- Можно задать чтобы при клике на родительской категории — внутренние также выделялись
- Можно задать сообщение которое выдается при попытке выделить лишний чекбокс если число их ограничено.
Вроде ничего не забыл )
Параметры:
- _loadPath — путь к файлу откуда будут загружены категории.
- _loadLvl — число подкатегорий по умолчанию — 0 — загружать все вложенные
- _selectChildren — выделять или нет дочерние подкатегории при выделении родительской
- _liminSelected — ограничить число отмеченных категорий
- _limitMessage — сообщение при превышении кол-ва отмеченных категорий
- _searchDiv — контейнер для поиска (должна находится строка и див)
- _showResult — сколько найденных результатов поиска показывать 0-все.
- _hlClass — класс которым будет подсвечены найденные категории
- _checkedClass — класс подсвечивающий отмеченные категории.
Использование:
$('.sp-tree-container').tree({_loadPath: 'php/li.html'});
* This source code was highlighted with Source Code Highlighter.Немного поясню: элемент li который имеет вложенные списки должен иметь класс folder, все ul, которые должны быть видимы имеют класс expanded. Заглавие категории засовывается в span, как раз по клику на него и происходит сворачивание/разворачивание подветви.
Ну вроде все…
Сильно красоту еще не наводил, так что не судите. Приму конструктивную критику ;)
