Связанные списки select с получением данных по ajax

В прошлый раз я показывал как можно «на лету» создавать списки html select, данные которых содержались в специальном javascript массиве.

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

База данных

Начнем с создания структуры данных.

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

Для этого я создал две таблички — tree и items.

Таблица tree будет содержать иерархию связанных пунктов для выпадающий списков.

tree-table

treeID — ключ, pID — указатель на родительский пункт, label — текстовая метка для выпадающего списка, а objID — указатель в таблицу items, для конечных элементов дерева.

В таблице items мы разместим описания видов вооружений.

items-table

Описание весьма условное. Кроме ключа в таблице есть title — название вооружения и какие то два параметра, которые мы вообще никак не характеризуем. :)

HTML код

Практически идентичен прошлому примеру.

Мы подключаем библиотеку jQuery и класс — TSEL, создающий связанные списки. TSEL работает с двумя HTML контейнерами, идентификаторы которых мы передадим при инициализации TSEL. Третьим параметром будет url к файлу сервера для обработки ajax запросов.

Javascript создающий списки

Файл tsel.js, подключаемый в секции head содержит класс-функцию объекта, который запрашивает данные на сервере и создаёт в нашем документе связанные выпадающие списки.

Давайте рассмотрим его, не вникая в подробности реализации.

Я не стал полностью приводить код, постарался описать его логику. Файлы примера, а также скрипт базы данных вы найдете в архиве в конце статьи.

Мы имеем дело всего с пятью функциями. Две из них грузят и показывают очередной уровень select-а, ещё две — делают тоже самое для карточки вооружений. А оставшаяся функция реализует логику : какую пару задействовать при выборе пункта списка.

PHP код, реализующий работу сервера

В PHP у нас производится отработка команд клиента, запросы к базе данных. Запросов всего два:

  • вернуть список опций ветки дерева, по указанному айди родителя (команда load-brunch),
  • вернуть данные об единице вооружения (команда load-object).

Надеюсь, загрузка данных пояснений не требует. :)

Результат

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

Мне не хотелось создавать лишние таблицы в базе сайта. Потому я ограничусь комментариями к скринам.

Сразу после инициализации появится первый из выпадающих списков. Как видите, он состоит из названий видов вооружений.

first-level-select-dynamic

Выбирая варианты, вы будете открывать следующий уровень. Я выбрал guns (надо было назвать его cannons или artillery :)) и получил следующий набор вариантов — это уже конечные элементы в моем примере.

guns-select

Потому при выборе одного из пунктов загрузились данные объекта.

cannon-2c5

Если с пунктом не связан объект, а также не удалось найти дочерние элементы списка — выскочит alert с надписью — «Ветка пуста!».

Вложенность ничем не ограничена. Кроме того, ветки и листочки могут располагаться на одном уровне.

Архив файлов и скрипт базы данных.

Скачать без регистрации и СМС :)

Архив содержит 5 файлов:

files

Настройки подключения к вашей базе данных введите в файле db.php. Скрипт для создания таблиц и дамп данных — в test_base.sql. Остальные файлы вы уже знаете.

Мало букафф? Читайте есчо !

Декабрь 26, 2012 г.

Анимация смены картинок с помощью jquery

Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами ...

Читать
Сентябрь 22, 2016 г.

Как убрать фокус, используя jQuery?

Не так принципиально, какой библиотекой мы воспользуемся, когда будем убирать фокус, я привык использовать jQuery. Потому речь пойдет в контексте этой библиотеки. Сложностей с тем как снять фокус с элемента традиционно больше, чем с тем, как его ...

Читать

 

Понравилась статья? Есть вопросы? - пишите в комментариях.




Комментарий: