Дерево категорий с чекбоксами на JQuery

    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, как раз по клику на него и происходит сворачивание/разворачивание подветви.

    Ну вроде все…

    Сильно красоту еще не наводил, так что не судите. Приму конструктивную критику ;)

    Similar posts

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

    More
    Ads

    Comments 10

      0
      Упс, забыл написать, что пока загружает данные (аяксом) дерево блокируется(плагин blockUI), во избежание неразберихи.
        0
        Баг: при выборе категориии не отмечаются все дочерние пункты.
          0
          Это не стоит в параметрах на демке, т.к. мы посчитали что не очень удобно. Вызывается указанием
          _selectChildren: true при вызове.
            +2
            Баг: после выбора всех чилдренов не выбирается родительская категория (автоматом) :)
              0
              fixed
            0
            Специально для вас добавил выделение дочерних подкатегорий а также ограничил число выбранных подкатегорий 5ю.
            +2
            Несколько вопросов:

            • Не считаете ли что плагин с такой яркой заточенностью под вашу задачу имеет крайне редкую применимость?
            • Почему не использовали UI?
            • Существует куча деревьев на jQuery, к примеру вот это. Насколько я понял по коду, вы полностью самостоятельно писали весь плагин. почему не использовали готовые решения?


            Код кстати можно от комментов почистить и сделать более презентабельную демку. Поиск по дереву очень понравился, вполне юзабельно. А как быть с деревьями под 10к элементов? пробовали тестить?
              0
              Честно говоря хотелось еще и попрактиковаться в JQuery, в готовых деревьях много лишнего функционала. Насчет заточенности — да, возможно. В основном применим для различных каталогов, где нужен выбор по категориям.
              UI не хотелось тянуть, задумывалось как максимально простенькое решение, без лишних наворотов.
              –1
              Работает.
                0
                Не принципиально, конечно, но зачем "_" в имени каждого параметра? Во многих библиотеках это показывает «приватность» метода/переменной.

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