Деревья. Категории бесконечной вложенности Получаем данные с сервера - метод _loadData()

Сегодня я расскажу, как на и MySQL создавать иерархическое дерево.

Такие деревья используются при построении категорий динамического сайта, например в интернет-магазине или при выводе комментариев к посту.

Вообще они строятся где только возможно. Главное правильно его построить и применить.

Самое главное, когда строишь иерархическое дерево — это правильная структура базы данных! Для примера рассмотрим структуру базы данных, где хранятся категории сайта. Для простого примера, таблица будет иметь 3 поля:

Создадим таблицу, выполнив SQL-запрос в PHPMyAdmin:

CREATE TABLE `categories` (`id` INT NOT NULL AUTO_INCREMENT , `parent_id` INT NOT NULL , `name` VARCHAR(50) NOT NULL , PRIMARY KEY (`id`));

Теперь нужно заполнить нашу таблицу записями. В результате, должна получится примерно такая таблица:

Можно заполнить тестовую таблицу запросом:

INSERT INTO `categories` (`id`, `parent_id`, `name`) VALUES (1, 0, "Раздел 1"), (2, 0, "Раздел 2"), (3, 0, "Раздел 3"), (4, 1, "Раздел 1.1"), (5, 1, "Раздел 1.2"), (6, 4, "Раздел 1.1.1"), (7, 2, "Раздел 2.1"), (8, 2, "Раздел 2.2"), (9, 3, "Раздел 3.1");

И сейчас внимание! Дальше по логике нужно делать выборки из БД в цикле для выбора каждой категории и её подкатегории. НО! Ладно, если в БД несколько категорий, что тоже в принципе не правильно. А если сайт — интернет-магазин и у него сотня категорий и столько же подкатегорий? Тогда беда! Неведомое количество запросов к базе данных приведет к замедлению работы сайта или же к полному краху mysql-сервера.

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

Сделаем запрос и сформируем удобный массив для дальнейшей работы.

//Выбираем данные из БД $result=mysql_query("SELECT * FROM categories"); //Если в базе данных есть записи, формируем массив if (mysql_num_rows($result) > 0){ $cats = array(); //В цикле формируем массив разделов, ключом будет id родительской категории, а также массив разделов, ключом будет id категории while($cat = mysql_fetch_assoc($result)){ $cats_ID[$cat["id"]] = $cat; $cats[$cat["parent_id"]][$cat["id"]] = $cat; } }

Выбираем все данные из таблицы categories и формируем ассоциативный массив $cats , ключем будет id родительской категорий.

Сейчас будем строить дерево. Для построения будем использовать рекурсивную функцию .

Иерархическое дерево будет иметь такую структуру:

• Раздел 1
  • Раздел 1.1
    • Раздел 1.1.1
  • Раздел 1.2
• Раздел 2
  • Раздел 1.1
  • Раздел 1.2
• Раздел 3
  • Раздел 3.1

Создадим рекурсивную функцию build_tree() . Она будет строить наше иерархическое дерево абсолютно любой вложенности.

Function build_tree($cats,$parent_id,$only_parent = false){ if(is_array($cats) and isset($cats[$parent_id])){ $tree = "

"; if($only_parent==false){ foreach($cats[$parent_id] as $cat){ $tree .= ""; } }elseif(is_numeric($only_parent)){ $cat = $cats[$parent_id][$only_parent]; $tree .= "
• ".$cat["name"]." #".$cat["id"]; $tree .= build_tree($cats,$cat["id"]); $tree .= "
"; } $tree .= "

Функция принимает массив разделов и id раздела. В цикле перебираем подкатегории и если в них есть еще разделы, тогда функция запускается еще раз с новыми параметрами (новый массив разделов и id раздела, который нужно построить). Так формируется дерево любой вложенности!

Для построения дерева, в коде прописываем:

Echo build_tree($cats,0);

Так вот в два шага мы создали иерархическое дерево разделов сайта и не важно сколько там разделов!

UPD Если нужно дерево категорий в обратном порядке зная id категории, тогда нужно воспользоваться функцией:

Function find_parent ($tmp, $cur_id){ if($tmp[$cur_id]["parent_id"]!=0){ return find_parent($tmp,$tmp[$cur_id]["parent_id"]); } return (int)$tmp[$cur_id]["id"]; }

Данная функция принимает массив категорий, ключом которой есть id рубрики, и id категории от которой нужно идти вверх.

Для построения такого дерева запускаем функцию build_tree c такими параметрами:

Echo build_tree($cats,0,find_parent($cats_ID,ВАШ_ID_КАТЕГОРИИ));

Есть вопросы? Задавайте в комментариях

май 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.

Теперь можно посмотреть на таблицу 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

Что нам нужно сделать?

• 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 приходит сообщение об ошибке.

С серверной частью нашего приложения все, переходим на клиента.

Если Вы уже посмотрели демо приложения, то увидели, что разметка предельно проста. Есть 2 главных контейнера: слева - для дерева категорий, справа - заглушка для списка товаров. В секции head будет такой код:

Список товаров

И добавим немного разметки в 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-коду создания дерева. Здесь-то мы и соберем воедино весь задуманный функционал.

Если Вы читали предыдущие статьи, например, про создание корзины для интернет-магазина на фронте или про встраиваемые виджеты на нативном javascript , то можете вспомнить, что схема js-кода у меня приблизительно одинакова для всех случаев.

Применим ее и здесь: создадим js-модуль, основанный на замыкании, закэшируем нужные элементы dom, напишем несколько приватных методов и один публичный - метод инициализации приложения.

Как видим в последней строчке, после загрузки документа мы вывываем метод app.init(), который в свою очередь загружает данные с сервера и передает их в метод создания дерева. В ajaxUrl пишем адрес нашего серверного скрипта, в объекте ui будут закешированы два dom-элемента.

Здесь пишем самый обычный ajax-запрос к серверному скрипту, получаем данные с категориями и в случае успеха передаем их функции инициализации дерева _initTree(). Мы помним, что данные с сервера нам приходят в формате json, поэтому укажем сразу dataType: "json". А нужная инфа придет в поле result, поэтому в _initTree мы передаем именно resp.result. Обработать ошибки можно как угодно, для примера просто выкинем их в консоль.

И это все, что нужно! Выглядит визуально самая сложная часть приложения до безобразия просто. Нужно к определенному элементу dom всего лишь применить метод jstree с некоторыми параметрами. В нашем случае передаем сами данные в поле data, multiple: false указывает, что нам не нужно множественное выделение, а check_callback: true говорит о том, что хотим после изменения дерева что-то еще и сделать.

В поле plugins перечисляем в массиве желаемые плюшки. Остановимся на dnd - drag-and-drop - прикрутим возможность изменять структуру дерева мышкой. Это очень удобная штука, но пока не функциональная. Можно сколько угодно играться с деревом в браузере, но после обновления страницы увидим старую структуру каталога. Это логично, потому что данные берутся с сервера, и мы не написали кода для обновления mysql при клиентских событиях. Этому будет посвящена одна из следующих статей, а пока будем баловаться, передвигая категории мышкой в браузере.

И напоследок методом bind связываем событие изменения в дереве с каким-то полезным действием. В нашем примере просто выведем надпись с названием категории, но в реальном приложении здесь стоит подтягивать список товаров с сервера. Откуда взялось category = data.node.text? Откройте консоль браузера и увидите, какие еще данные о выбранном узле нам доступны.

В этой статье полноценный каталог для работы интернет-магазина мы не построили - идея была не в том. Я хотел сосредоточиться на том, как от начала до конца максимально просто построить такую полезную структуру как дерево. Сознательно были пропущены некоторые моменты, а именно, более плотная работа с самим деревом и синхронизация действий клиента с сервером, а также построение списка товаров при клике категории. Для первого варианта выпущу отдельную статью.

UPDATED: Запилил статью, где показывается, как перемещать отдельные элементы дерева мышкой, методом drag-and-drop, и синхронизировать эти данные с сервером. Немного кода на клиенте и сервере - и вуаля! Ссылка чуть ниже под нумером 4.

И так для начала опишу с чем мы будем работать и что нам понадобится.
Система : PHP 5 и выше, mySQL 4 и выше
Вспомогательные классы : dbsql.class.php (класс для работы с базой данных)
Класс вложенных категорий : classTreeCategory.php (непосредственно основной класс, ниже приведен его листинг и пояснения.

Создаем таблицу в БД, следующей структуры:

Просмотр кода MYSQL

В данной таблице присутствует поле ID — порядковый номер категории, podcat — имеет значение ноль у категорий первого порядка или ID родительской категории, name — название категории.

Пример работы класса, вывод категорий списком с подкатегориями:

Просмотр кода PHP

Как видно из примера выше, все предельно просто, создаем новый объект $category, устанавливаем с какой таблицей БД работаем: ‘category’, далее получаем из таблицы список всех категорий уже оформленный в виде массива и разложенных в иерархичном порядке, с учетом всех подкатегорий. затем передаем массив в метод outCategory() который формирует для нас готовый HTML код, который остается только вывести в браузер.

Метод outCategory(), как мы видим принимает два параметра @array и @string в первом параметре массив со всеми категориями, а во втором строка содержащая значение option или table , это значени указывает какой тип HTML кода требуется сформировать.
Значение option

Просмотр кода HTML

Для вставки данного HTML кода в поле select какой либо формы.

Значение table — формирует следующий HTML код:

Просмотр кода HTML

Этот HTML код удобен для вставки в таблицу которая отображает все наши категории подкатегории.

Класс имеет также следующие методы:
deleteItem($id); — удаляет одну категорию, не смотря на вложенные
delCategory($array, $id); — удаляет категорию со всеми вложенными подкатегориями, $array — массив со всеми категориями подготовленный методом $category->getCategory(), $id- номер удаляемой категории
addItem(); — данный метод следует вызывать если вы хотите добавить категорию, при этом этот метод считывает значения из данных переданных методом POST, т.е. из массива $_POST.
$name=$this->PHP_slashes(strip_tags($_POST[‘name’])); // имя категории
$podcat=intval($_POST[‘podcat’]); // ID родительской категории, если указан 0 категория будет в корне.
updateItem() ; — аналогично предыдущему методу, кроме того что данный метод обновляет категорию, её название и уровень вложенности.

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

Буду признателен если в комментариях вы предложите собственные варианты решения данной задачи — организации категорий бесконечного уровня вложенности.

Очередная задача — сделать категории бесконечной вложенности средствами PHP. Облазив несколько сайтов я нашел много решений, но вот они не все доступны для моего понимания, т.к. уровень программирования там выше моего. Поэтому я нашел самое простое, возможно, не самое элегантное, но зато рабочее решение.

Сначала давайте посмотрим, что у меня находится в БД

• id — идентификатор нашей категории
• category — название категории
• category_id — идентификатор родительской категории. Можно было назвать parent_id, но так мне привычнее
• lvl — уровень вложенности категории. Нужен для формирования ...
• Все, что замазано — вам ни к чему, т.к. там информация нужная для меня лично, и чтобы вас не вводит в заблуждение — я затер эту ненужную инфу.

Особо тут рассказывать нечего, если есть вопросы, то пишите в комментарии, а тем кому особо все равно, что здесь написано, предлагаю сразу посмотреть результат

Если вы не поняли, то поле lvl в базе данных нам как раз нужно для того, чтобы знать, сколько "-" ставить перед названием категорий. Конечно, есть более изысканный метод без lvl, но на данный момент у меня только такое решение. Как что изменится — обновлю статью.

• А вот вам другое решение, когда нужно вывести не в форму, а в список.

  Тут нам lvl уже не нужен, поэтому кода меньше. А ниже результат

  Строится при помощи добавления в модель поля типа Родитель "parent" , которое хранит id родителя текущей записи. Для корневых записей значение данного поля равно "-1".

  Внимание! Поле типа "parent" может быть в модели только одно.

  Пример простого использования дерева при создании меню вложенных страниц.

  Связанное дерево

  Для создания структуры вида "каталог -> каталог -> каталог -> товар" или "альбом -> альбом -> изображение" нужно связать модель с полем "parent" с другой моделью таким образом чтобы конечный родитель первой модели являлся внешним ключом для записей другой модели.

  Пример создания связанного дерева для многоуровнего каталога товаров.

  Class Catalogs extends Model { protected $name = "Разделы каталога"; protected $model_elements = array(array("Активен", "bool", "active", array("on_create" => true)), array("Название", "char", "name", array("required" => true)), array("Каталог", "parent", "parent", array("parent_for" => "Products")), array("Ссылка", "url", "url"), array("Позиция", "order", "order")); } class Products extends Model { protected $name = "Товары каталога"; protected $model_elements = array(array("Активен", "bool", "active", array("on_create" => true)), array("Название", "char", "name", array("required" => true)), array("Раздел каталога", "enum", "parent", array("foreign_key" => "Catalogs", "is_parent" => true)), array("Цена", "int", "price", array("required" => true)), array("Изображения", "multi_images","images"), array("Описание", "text", "desc", array("rich_text" => true)), array("Позиция", "order", "order")); }

  Специальные методы деревьев

  Для быстрого доступа к родителям и потомкам в дереве предусмотрены специальные методы.

  • getParents($id) - возвращает массив родительских записей (до записи со значением родительского поля равным -1). В результирующем массиве ключи - id записей, значения - названия записей соглаcно параметру "$name_field" из раздела Настройка модели .
  • getChildren($id) - возвращает массив всех дочерних записей, рекурсивно обходя все ветви дерева. Результирующий массив строится аналогично предыдущему методу.
  • displayBreadcrumbs($id, $url_first [, $url_field]) - отображает ссылочный путь до записи с переданным id. Возвращает последовательность html тэгов в виде
    "ссылка -> ссылка -> ссылка -> span". Входящие параметры: id текущей записи, $url_first - первая часть url,
    необязательный параметр $url_field - название поля в котором хранится текстовая ссылка для данной записи (для построения url вида "catalog/toys/"). Для предустановленной модели "Pages" ссылки автоматически строятся в виде "/page/4/" и "/contacts/" (без первой части).
  $catalog = $mv -> catalogs -> findRecordById(43); //Родительские записи $parents = $mv -> catalogs -> getParents($catalog -> id); //Дочерние записи $children = $mv -> catalogs -> getChildren($catalog -> id); //Ссылочный путь для раздела каталога echo $mv -> catalogs -> displayBreadcrumbs($catalog -> id, "category", "url"); //Ссылочный путь для товара каталога echo $mv -> products -> displayBreadcrumbs($product -> id, "category"); //Ссылочный путь будет в виде Игрушки Мячи Мяч красный