Сегодня наша цель, создать иерархическую структуру категорий. Нам важно чтобы было удобно хранить категории и чтобы было легко выводить их там где нам надо.
Иногда простое кажется сложным, именно по этому выложу несколько фрагментов кода, которые я надеюсь вам пригодятся для реализации php категорий в виде дерева.
Итак, структура должна состоять из id категории (id), из названия категории (name) и конечно id родительской категории (parent_id). В MySQL это выглядит так:
CREATE TABLE IF NOT EXISTS `category` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `parent_id` int(11) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ;
Минимальная и понятная структура таблицы для хранения категорий.
INSERT INTO `category` (`id`, `name`, `parent_id`) VALUES (1, "Телефоны и планшеты", "0"), (2, "Автомобили", "0"), (3, "Samsung", "1"), (4, "Apple", "1"), (5, "LG", "1"), (6, "Ford", "2"), (7, "Lexus", "2"), (8, "BMW", "2"), (9, "Galaxy Tab 4", "3"), (10, "Galaxy S6", "3");
Там где значение parent_id=0, у данной категории нет родительской категории.
Тут все понятно и просто. Теперь присутпим к выводу списка категорий. Но для правильного вывода списка, нам нужно сначала получить весь список php категорий, а уже потом с помощью рекурсии сформировать наше дерево. Следующая функция предназначена для получения этого списка:
Function get_cat() { //запрос к базе данных $sql = "SELECT * FROM category"; $result = mysql_query($sql); if(!$result) { return NULL; } $arr_cat = array(); if(mysql_num_rows($result) != 0) { //В цикле формируем массив for($i = 0; $i < mysql_num_rows($result);$i++) { $row = mysql_fetch_array($result,MYSQL_ASSOC); //Формируем массив, где ключами являются адишники на родительские категории if(empty($arr_cat[$row["parent_id"]])) { $arr_cat[$row["parent_id"]] = array(); } $arr_cat[$row["parent_id"]] = $row; } //возвращаем массив return $arr_cat; } }
//получаем массив каталога $result = get_cat();
Теперь нужна функция с рекурсией
Function view_cat($arr,$parent_id = 0) { //Условия выхода из рекурсии if(empty($arr[$parent_id])) { return; } echo "
- ";
//перебираем в цикле массив и выводим на экран
for($i = 0; $i < count($arr[$parent_id]);$i++) {
echo "
- " .$arr[$parent_id][$i]["name"].""; //рекурсия - проверяем нет ли дочерних категорий view_cat($arr,$arr[$parent_id][$i]["id"]); echo " "; } echo "
Теперь осталось только вывести каталог на экран с помощью рекурсивной функции
View_cat($result);
И в общем то и всё. Таким образом мы можем получить полное дерево категорий с бесконечными подкатегориями.
май 28 , 2016
При разработке веб-приложений мы часто сталкиваемся с необходимостью представлять данные в виде дерева. При создании того же интернет-магазина линейная структура категорий товаров подойдет только небольшим проектам. Чаще всего хочется, чтобы была возможность вкладывать категории друг в друга. В других случаях, например, если создаете файловый менеджер, без категорий обойтись еще сложнее.
В этой статье я расскажу, как можно легко сообразить симпатичное дерево данных у себя на сайте, начиная от создания таблицы в mysql, и заканчивая выводом дерева в браузере. На клиенте будем использовать библиотеку jstree, несложный серверный код напишем сами.
Что мы собираемся делать и что получим в итоге?
Для примера рассмотрим неоднократно упоминавшийся интернет-магазин и создадим для него дерево категорий товаров. Торговать будем традиционно компьютерной техникой. Сначала создадим таблицу категорий в mysql, потом нарисуем разметку для страницы каталога, напишем js-код и, наконец, php-скрипт, который лезет в базу и отдает категории клиенту в нужном формате. И сразу ссылка на
Создаем таблицу категорий
Для создания сколь угодно разветвленной структуры категорий нам понадобится всего одна таблица. Назовем ее categories и создадим в ней 4 поля: id, category, parent_id и number. id будет первичным ключом и автоинкрементом, category - название категории, parent_id - это id категории-родителя, number - порядковый номер категории в родительской.
Поясню: например, имеем 3 категории товаров, родительская - ноутбуки, в ней лежат еще 2 - Acer и Lenovo.
В таблице это будет выглядеть так:
id, category, parent_id, number
1, Ноутбуки, 0, 1
2, Acer, 1, 1
3, Lenovo, 1, 2
Условимся, что корневые категории будут иметь parent_id = 0.
Поле number нужно, чтобы организовать вывод категорий в нужном порядке, мы же не гарантируем,
что на первом месте всегда будет Acer, поэтому нужно иметь возможность поменять порядок вывода.
В каждой подкатегории создается своя нумерация, начиная с 1.
Чтобы было лучше видно, как строится иерархия, создайте таблицу в mysql и забейте в нее тестовые данные. Ниже sql-код для того и другого. Базу данных по привычке назовем webdevkin.
Структура таблицы категорий
use webdevkin; create table categories (id int(10) unsigned not null auto_increment, category varchar(255) not null, parent_id int(10) unsigned not null, number int(11) unsigned not null, primary key (id)) engine = innodb auto_increment = 18 avg_row_length = 963 character set utf8 collate utf8_general_ci;Тестовые данные
use webdevkin; SET NAMES "utf8"; INSERT INTO categories(`id`, `category`, `parent_id`, `number`) VALUES (1, "Ноутбуки", 0, 1), (2, "Acer", 1, 1), (3, "Lenovo", 1, 2), (4, "Apple", 1, 3), (5, "Macbook Air", 4, 1), (6, "Macbook Pro", 4, 2), (7, "Sony Vaio", 1, 4), (8, "Смартфоны", 0, 2), (9, "iPhone", 8, 1), (10, "Samsung", 8, 2), (11, "LG", 8, 3), (12, "Vertu", 8, 4), (13, "Комплектующие", 0, 3), (14, "Процессоры", 13, 1), (15, "Память", 13, 2), (16, "Видеокарты", 13, 3), (17, "Жесткие диски", 13, 4);Теперь можно посмотреть на таблицу categories в привычном phpMyAdmin-e или dbForgeStudio и переходить к созданию нашего мини-приложения.
Структура проекта
В корне проекта у нас будет лежать index.html и 4 незатейливых папки: img, css, js и php. В img находится одна картинка loading.gif. Она будет показываться посетителям сайта, пока дерево категорий грузится с сервера. В папке css лежит файл main.css со стилями для нашей страницы и папка jstree, в которой находится стили и картинки для библиотеки jstree.
Папку js разделим по старой памяти на vendor и modules. В первой папке будут библиотеки jquery и jstree. Уточню - jquery требуется не только нам, но и как зависимость для jstree. В папке modules единственный файл main.js - главный js-скрипт приложения. В папку php отправим index.php, который выполнит всю серверную работу.
В этот раз удобнее рассказать сначала о серверной стороне дела, а потом перейти на клиентскую часть. Поэтому смотрим, как вытащить данные из таблицы категорий в нужном формате - файл php/index.php
Серверный код - index.php
Что нам нужно сделать?
- 1. Подлючиться к базе данных
- 2. Вытащить список категорий
- 3. Отправить информацию в браузер
Список простой, и с реализацией возникнуть проблем не должно. В начале файла объявим нужные константы для подключения к базе.
// Объявляем нужные константы define("DB_HOST", "localhost"); define("DB_USER", "user"); define("DB_PASSWORD", "password"); define("DB_NAME", "webdevkin");
Затем пишем функцию подключения к базе данных, используем mysqli.
// Подключаемся к базе данных function connectDB() { $errorMessage = "Невозможно подключиться к серверу базы данных"; $conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); if (!$conn) throw new Exception($errorMessage); else { $query = $conn->query("set names utf8"); if (!$query) throw new Exception($errorMessage); else return $conn; } }
Дальше нам нужно вытащить список категорий из таблицы. Здесь нужно немного забежать вперед. Библиотека jstree принимает на вход json. Допустимые форматы описаны на сайте библиотеки jstree.com . Мы возьмем самый удобный для нас и будем отдавать с сервера сразу подготовленные данные. Этот формат выглядит так:
[ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ]
Пример взят из документации, мы же для удобства в качестве id будем использовать просто id из нашей базы - число без префикса ajson. Переходим к функции получения категорий из таблицы БД
// Вытаскиваем категории из БД function getCategories($db) { $query = " SELECT id AS `id`, IF (parent_id = 0, "#", parent_id) AS `parent`, category as `text` FROM categories ORDER BY `parent`, `number` "; $data = $db->query($query); $categories = array(); while ($row = $data->fetch_assoc()) { array_push($categories, array("id" => $row["id"], "parent" => $row["parent"], "text" => $row["text"])); } return $categories; }
Здесь мы выполняем обычный запрос select к таблице categories, вытаскиваем 3 нужных поля, попутно немного преобразовывая их к требуемому формату. id прокидываем без изменений, parent_id мы возвращаем как parent, причем для корневых категорий возвращаем #. А поле category будет проходить как text. Данные получены, осталось загнать их в массив, который мы будем конвертировать в json и отдавать браузеру. Это видно в основном потоке скрипта
Try { // Подключаемся к базе данных $conn = connectDB(); // Получаем данные из массива GET $action = $_GET["action"]; switch ($action) { case "get_categories": $result = getCategories($conn); break; default: $result = "unknown action"; break; } // Возвращаем клиенту успешный ответ echo json_encode(array("code" => "success", "result" => $result)); } catch (Exception $e) { // Возвращаем клиенту ответ с ошибкой echo json_encode(array("code" => "error", "message" => $e->getMessage())); }
На что нужно обратить внимание. В нашем конкретном случае передача get-параметра action выглядит лишней, но это до тех пор, пока файл index.php служит для одной-единственной задачи - вернуть список категорий. Вскоре будет опубликована статья с развитием функционала дерева, в частности, реализация drag-and-drop на клиенте и обновление соответствующих данных на сервере. В ней мы увидим, что передача get-параметра в качестве указания необходимого действия - это достаточно удобная тема.
И насчет ответа клиенту. Поле code всегда указывает на статус выполнения запроса - success или error. В случае успеха массив категорий возвращается в поле result, при каких-то неполадках в поле message приходит сообщение об ошибке.
С серверной частью нашего приложения все, переходим на клиента.
Разметка для страницы нашего каталога - index.html
Если Вы уже посмотрели демо приложения, то увидели, что разметка предельно проста. Есть 2 главных контейнера: слева - для дерева категорий, справа - заглушка для списка товаров. В секции head будет такой код:
Webdevkin. Дерево категорий на javascript, php и mysql
Список товаров
И добавим немного разметки в main.css
Body { font-family: Ubuntu; font-size: 16px; font-weight: 400; } .container { position: relative; width: 960px; margin: 0 auto; } .column { display: inline-block; vertical-align: top; } .categories { width: 30%; }
С html/css закончили и теперь переходим к самому интересному - javasctipt-коду создания дерева. Здесь-то мы и соберем воедино весь задуманный функционал.
main.js - инициализация приложения
Если Вы читали предыдущие статьи, например, про создание корзины для интернет-магазина на фронте или про встраиваемые виджеты на нативном javascript , то можете вспомнить, что схема js-кода у меня приблизительно одинакова для всех случаев.
Применим ее и здесь: создадим js-модуль, основанный на замыкании, закэшируем нужные элементы dom, напишем несколько приватных методов и один публичный - метод инициализации приложения.
Каркас модуля
"use strict"; // Модуль приложения var app = (function($) { // Инициализируем нужные переменные var ajaxUrl = "/php", ui = { $categories: $("#categories"), $goods: $("#goods") }; // Инициализация дерева категорий с помощью jstree function _initTree(data) { // ... } // Загрузка категорий с сервера function _loadData() { // ... } // Инициализация приложения function init() { _loadData(); } // Экспортируем наружу return { init: init } })(jQuery); jQuery(document).ready(app.init);Как видим в последней строчке, после загрузки документа мы вывываем метод app.init(), который в свою очередь загружает данные с сервера и передает их в метод создания дерева. В ajaxUrl пишем адрес нашего серверного скрипта, в объекте ui будут закешированы два dom-элемента.
Получаем данные с сервера - метод _loadData()
// Загрузка категорий с сервера function _loadData() { var params = { action: "get_categories" }; $.ajax({ url: ajaxUrl, method: "GET", data: params, dataType: "json", success: function(resp) { // Инициализируем дерево категорий if (resp.code === "success") { _initTree(resp.result); } else { console.error("Ошибка получения данных с сервера: ", resp.message); } }, error: function(error) { console.error("Ошибка: ", error); } }); }Здесь пишем самый обычный ajax-запрос к серверному скрипту, получаем данные с категориями и в случае успеха передаем их функции инициализации дерева _initTree(). Мы помним, что данные с сервера нам приходят в формате json, поэтому укажем сразу dataType: "json". А нужная инфа придет в поле result, поэтому в _initTree мы передаем именно resp.result. Обработать ошибки можно как угодно, для примера просто выкинем их в консоль.
Построение дерева в функции _initTree, используем jstree
// Инициализация дерева категорий с помощью jstree function _initTree(data) { ui.$categories.jstree({ core: { check_callback: true, multiple: false, data: data }, plugins: ["dnd"] }).bind("changed.jstree", function(e, data) { var category = data.node.text; ui.$goods.html("Товары из категории " + category); console.log("node data: ", data); }); }И это все, что нужно! Выглядит визуально самая сложная часть приложения до безобразия просто. Нужно к определенному элементу dom всего лишь применить метод jstree с некоторыми параметрами. В нашем случае передаем сами данные в поле data, multiple: false указывает, что нам не нужно множественное выделение, а check_callback: true говорит о том, что хотим после изменения дерева что-то еще и сделать.
В поле plugins перечисляем в массиве желаемые плюшки. Остановимся на dnd - drag-and-drop - прикрутим возможность изменять структуру дерева мышкой. Это очень удобная штука, но пока не функциональная. Можно сколько угодно играться с деревом в браузере, но после обновления страницы увидим старую структуру каталога. Это логично, потому что данные берутся с сервера, и мы не написали кода для обновления mysql при клиентских событиях. Этому будет посвящена одна из следующих статей, а пока будем баловаться, передвигая категории мышкой в браузере.
И напоследок методом bind связываем событие изменения в дереве с каким-то полезным действием. В нашем примере просто выведем надпись с названием категории, но в реальном приложении здесь стоит подтягивать список товаров с сервера. Откуда взялось category = data.node.text? Откройте консоль браузера и увидите, какие еще данные о выбранном узле нам доступны.
Итого
В этой статье полноценный каталог для работы интернет-магазина мы не построили - идея была не в том. Я хотел сосредоточиться на том, как от начала до конца максимально просто построить такую полезную структуру как дерево. Сознательно были пропущены некоторые моменты, а именно, более плотная работа с самим деревом и синхронизация действий клиента с сервером, а также построение списка товаров при клике категории. Для первого варианта выпущу отдельную статью.
UPDATED: Запилил статью, где показывается, как перемещать отдельные элементы дерева мышкой, методом drag-and-drop, и синхронизировать эти данные с сервером. Немного кода на клиенте и сервере - и вуаля! Ссылка чуть ниже под нумером 4.
Ни один сайт не обходится без навигации или как еще называют "меню сайта". Так вот меню сайта бывает одноуровневым и многоуровневым в виде дерева. Если с одноуровневым меню особых сложностей в плане реализации не возникает, то при создании многоуровневого меню нужно хорошо подумать.
Самое главное в этой задаче это спроектировать базу данных для нашего многоуровневого меню. Создадим таблицу Categories с тремя полями id , title , parent где:
- ID - идентификатор
- Title - Название меню
- Parent - Родитель категории по умолчанию 0
За ветвление меню отвечает поле Parent если Parent = 0 , то эта категория является родительской. Для того чтобы добавить потомков к родительской категории нужно в поле parent указать ID нужного родителя. Например:
Таблицы с категориями
Как видно из таблицы, у родительской категории Автомобили есть два потомка - это Мазда и Хонда связанных по полю Parent . А у категории Мотоциклы два потомка - это Кавасаки и Харлей . При этом у категории Лодки нет потомков. Надеюсь, что Вы поняли,как связать категории.
Далее переходим от слов к практике. Создадим таблицу Categories.
CREATE TABLE IF NOT EXISTS `categories` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `parent` int(10) unsigned NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=20 ; -- -- Дамп данных таблицы `categories` -- INSERT INTO `categories` (`id`, `title`, `parent`) VALUES (1, "Автомобили", 0), (2, "Мотоциклы", 0), (3, "Мазда", 1), (4, "Хонда", 1), (5, "Кавасаки", 2), (6, "Харлей", 2), (7, "Мазда 3", 3), (8, "Мазда 6", 3), (9, "Седан", 7), (10, "Хечбэк", 7), (11, "Лодки", 0), (12, "Лифтбэк", 8), (13, "Кроссовер", 8), (14, "Белый", 13), (15, "Красный", 13), (16, "Черный", 13), (17, "Зеленый", 13), (18, "Мазда CX", 3), (19, "Мазда MX", 3);Алгоритм работы состоит из следующего:
Создаем соединение с базой данных
query("SET NAMES "utf8""); /* * Это "официальный" объектно-ориентированный способ сделать это * однако $connect_error не работал вплоть до версий PHP 5.2.9 и 5.3.0. */ if ($mysqli->connect_error) { die("Ошибка подключения (" . $mysqli->connect_errno . ") " . $mysqli->connect_error); } /* * Если нужно быть уверенным в совместимости с версиями до 5.2.9, * лучше использовать такой код */ if (mysqli_connect_error()) { die("Ошибка подключения (" . mysqli_connect_errno() . ") " . mysqli_connect_error()); }Пишем функцию получения данных из таблицы Categories
//Получаем массив нашего меню из БД в виде массива function getCat($mysqli){ $sql = "SELECT * FROM `categories`"; $res = $mysqli->query($sql); //Создаем масив где ключ массива является ID меню $cat = array(); while($row = $res->fetch_assoc()){ $cat[$row["id"]] = $row; } return $cat; }Получаем массив вот такого вида, где ключ массива это ID категории.
Функция построения дерева из массива от Tommy Lacroix
//Функция построения дерева из массива от Tommy Lacroix function getTree($dataset) { $tree = array(); foreach ($dataset as $id => &$node) { //Если нет вложений if (!$node["parent"]){ $tree[$id] = &$node; }else{ //Если есть потомки то перебераем массив $dataset[$node["parent"]]["childs"][$id] = &$node; } } return $tree; }Получаем массив в виде дерева
Скрипт целиком
query("SET NAMES "utf8""); /* * Это "официальный" объектно-ориентированный способ сделать это * однако $connect_error не работал вплоть до версий PHP 5.2.9 и 5.3.0. */ if ($mysqli->connect_error) { die("Ошибка подключения (" . $mysqli->connect_errno . ") " . $mysqli->connect_error); } /* * Если нужно быть уверенным в совместимости с версиями до 5.2.9, * лучше использовать такой код */ if (mysqli_connect_error()) { die("Ошибка подключения (" . mysqli_connect_errno() . ") " . mysqli_connect_error()); } //Получаем массив нашего меню из БД в виде массива function getCat($mysqli){ $sql = "SELECT * FROM `categories`"; $res = $mysqli->query($sql); //Создаем масив где ключ массива является ID меню $cat = array(); while($row = $res->fetch_assoc()){ $cat[$row["id"]] = $row; } return $cat; } //Функция построения дерева из массива от Tommy Lacroix function getTree($dataset) { $tree = array(); foreach ($dataset as $id => &$node) { //Если нет вложений if (!$node["parent"]){ $tree[$id] = &$node; }else{ //Если есть потомки то перебераем массив $dataset[$node["parent"]]["childs"][$id] = &$node; } } return $tree; } //Получаем подготовленный массив с данными $cat = getCat($mysqli); //Создаем древовидное меню $tree = getTree($cat); //Шаблон для вывода меню в виде дерева function tplMenu($category){ $menu = "- ". showCat($category["childs"]) ."
- ". $cat_menu ."
Результат работы
Многоуровневое меню на PHP + MySQL для админки
Если Вы хотите использовать данное меню в админке своего сайта, то нужно переписать пару функций tplMenu() , showCat() .
".$category["title"].""; }else{ $menu = ""; } if(isset($category["childs"])){ $i = 1; for($j = 0; $j < $i; $j++){ $str .= "→"; } $i++; $menu .= showCat($category["childs"], $str); } return $menu; } /** * Рекурсивно считываем наш шаблон **/ function showCat($data, $str){ $string = ""; $str = $str; foreach($data as $item){ $string .= tplMenu($item, $str); } return $string; } //Получаем HTML разметку $cat_menu = showCat($tree, ""); //Выводим на экран echo ""; ?>
Результат работы
Выбери Автомобили → Мазда →→ Мазда 3 →→→ Седан →→→ Хечбэк →→ Мазда 6 →→→ Лифтбэк →→→ Кроссовер →→→→ Белый →→→→ Красный →→→→ Черный →→→→ Зеленый →→ Мазда CX →→ Мазда MX → Хонда Мотоциклы → Кавасаки → Харлей ЛодкиЛишь в далеком 2009 году. С тех времен все довольно сильно поменялось. Плагин активно развивается. Страница проекта на гитхабе .
Учитывая специфику проекта, над которым сейчас работаю(справочная система), этот плагин оказался просто незаменимым, и я использую 90% его функционала с превеликим удовольствием. И я до сих пор не видел такой же мощной альтернативы.
Если вам нужно отрисовать в брауезере просто дерево, то, конечно можно использовать и другие плагины, или вовсе написать это самому и лаконично, но для более широкого функционала - JsTree - просто отличный вариант.
Что мы имеем?
- Построение дерева на основе html разметки, json и xml формата
- Drag & drop с тонкой настройкой возможности перемещения нодов по дереву
- Динамическое добавление/удаление/изменение нодов
- Возможность построения нескольких деревьев на одной странице и манипуляция нодами между этими деревьями
- Возможность присвоения нодам произвольных типов (file, folder, drive, да какой угодно), и указать отдельное поведения для каждого
- Поддержка тем оформления (на скрине в начале статьи пример того, как это реализовал я)
- Управление с клавиатуры
- Использование нативных и кастомных чекбоксов
- AJAX подгрузка нодов, запоминание состояния дерева
- Плагин красиво и читабельно написан, позволяет писать дополнительные плагины к нему и без проблем кастомизировать.
- Удобная система байндингов для обработки событий
- Мультиязычность
- Управление анимацией раскрытия
- Поиск по дереву
- Кастомное контекстное меню
- Поддержка браузеров: IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome
- Мини-фича, которая меня особенно порадовала - плагин wholerow - выделения нода во всю ширину. А-ля mac style
Как оно работает?
Отличные и понятные примеры можно найти на официальном сайте. .Чтобы начать работу, нам нужно подключить jquery.js, jstree.js(180КБ в несжатом виде) и папку с темами(подключается плагином сама, достаточно положить ее рядом)
Приведу пример использования дерева на основе JSON.
HTML:
JQuery: $("#tree") .bind("before.jstree", function (e, data) { // байндинг на событие перед загрузкой дерева }) .jstree({ // Подключаем плагины "plugins" : [ "themes","json_data" ], "json_data" : { "ajax" : { "url" : "tree.php", // получаем наш JSON "data" : function (n) { // необходиый коллбэк } } }, }) .bind("select_node.jstree", function(e, data){ // байндинг на выделение нода // укажем ему открытие документа на основе якорей window.location.hash = "view_" + data.rslt.obj.attr("id").replace("node_",""); }) });
Получаем простое дерево в духе примеров
Пожалуй не буду описывать простыню из других примеров. Вы можете ознакомится с ними на официальном сайте, а вот если есть какие либо конкретные вопросы по теме, с удовольствием отвечу.