Строится при помощи добавления в модель поля типа Родитель "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/" (без первой части).
май 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); Алгоритм работы состоит из следующего: Создаем соединение с базой данных Результат работы Многоуровневое меню на PHP + MySQL для админкиЕсли Вы хотите использовать данное меню в админке своего сайта, то нужно переписать пару функций tplMenu() , showCat() .
Результат работы Выбери Автомобили → Мазда →→ Мазда 3 →→→ Седан →→→ Хечбэк →→ Мазда 6 →→→ Лифтбэк →→→ Кроссовер →→→→ Белый →→→→ Красный →→→→ Черный →→→→ Зеленый →→ Мазда CX →→ Мазда MX → Хонда Мотоциклы → Кавасаки → Харлей Лодки
И так для начала опишу с чем мы будем работать и что нам понадобится.
Система
: PHP 5 и выше, mySQL 4 и выше
Вспомогательные классы
: dbsql.class.php (класс для работы с базой данных)
Класс вложенных категорий
: classTreeCategory.php (непосредственно основной класс, ниже приведен его листинг и пояснения.
Создаем таблицу в БД, следующей структуры:
Просмотр кода MYSQL
В данной таблице присутствует поле ID — порядковый номер категории, podcat — имеет значение ноль у категорий первого порядка или ID родительской категории, name — название категории.
Пример работы класса, вывод категорий списком с подкатегориями:
Просмотр кода PHP
| include ("dbsql.class.php" ) ; include ("classTreeCategory.php" ) ; $DB = new DB_Engine("mysql" , $settings [ "dbHost" ] , $settings [ "dbUser" ] , $settings [ "dbPass" ] , $settings [ "dbName" ] ) ; // подключаемся к БД, с указанием данных доступа $category = new TreeCategory ($DB ) ; // передаем в класс категорий, объект работы с БД $category -> table = "category" ; // название таблицы в БД с категорийми $array = $category -> getCategory () ; // получаем все категории из БД в виде многоуровневого массива, отсортированные и вложенные уже в нужном нам порядке $category -> outCategory ($array , "option" ) ; // подготовка вывода категорий (формируем HTML), передаем массив с категориями echo $category -> html ; // вывод категорий в виде HTML name |
Как видно из примера выше, все предельно просто, создаем новый объект $category, устанавливаем с какой таблицей БД работаем: ‘category’, далее получаем из таблицы список всех категорий уже оформленный в виде массива и разложенных в иерархичном порядке, с учетом всех подкатегорий. затем передаем массив в метод outCategory() который формирует для нас готовый HTML код, который остается только вывести в браузер.
Метод outCategory(), как мы видим принимает два параметра @array и @string в первом параметре массив со всеми категориями, а во втором строка содержащая значение option
или table
, это значени указывает какой тип HTML кода требуется сформировать.
Значение option
Просмотр кода HTML
| -категория1 --подкатегория 1 ---подподкатегория 1 -категория 2 |
Для вставки данного 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()
; — аналогично предыдущему методу, кроме того что данный метод обновляет категорию, её название и уровень вложенности.
Весь класс писался в течении часа и разумеется имеет недочеты, но все этот поправимо. Его использование целесообразно в обучающих целях, хотя впрочем немного допилив его, вы сможете встроить его в любую систему и наслаждаться его работой)).
Буду признателен если в комментариях вы предложите собственные варианты решения данной задачи — организации категорий бесконечного уровня вложенности.
Лишь в далеком 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_","");
})
});
Получаем простое дерево в духе примеров
Пожалуй не буду описывать простыню из других примеров. Вы можете ознакомится с ними на официальном сайте, а вот если есть какие либо конкретные вопросы по теме, с удовольствием отвечу.
