Що ми збираємося робити і що отримаємо в результаті?
Щоб було краще видно, як будується ієрархія, створіть таблицю в mysql і забийте в неї тестові дані. Нижче sql-код для того і іншого. Базу даних за звичкою назвемо webdevkin.
тестові дані
Тепер можна подивитися на таблицю categories в звичному phpMyAdmin-e або dbForgeStudio і переходити до створення нашого міні-додатки.
структура проекту
Папку js розділимо по старій пам'яті на vendor і modules. У першій папці будуть бібліотеки jquery і jstree. Уточню - jquery потрібно не тільки нам, а й як залежність для jstree. В папці modules єдиний файл main.js - головний js-скрипт додатка. В папку php відправимо index.php, який виконає всю серверну роботу.
Серверний код - index.php
Список простий, і з реалізацією виникнути проблем не повинно. На початку файлу оголосимо потрібні константи для підключення до бази.
Потім пишемо функцію підключення до бази даних, використовуємо mysqli.
З серверної частиною нашого застосування все, переходимо на клієнта.
Розмітка для сторінки нашого каталогу - index.html
У секції body теж нехитро.
І додамо трохи розмітки в main.css
З html / css закінчили і тепер переходимо до найцікавішого - javasctipt-коду створення дерева. Тут-то ми і зберемо воєдино весь задуманий функціонал.
main.js - ініціалізація додатки
Застосуємо її і тут: створимо js-модуль, заснований на замиканні, закешіруем потрібні елементи dom, напишемо кілька приватних методів і один публічний - метод ініціалізації програми.
каркас модуля
Отримуємо дані з сервера - метод _loadData ()
Побудова дерева в функції _initTree, використовуємо jstree
І це все, що потрібно! Виглядає візуально найскладніша частина додатка до неподобства просто. Потрібно до певного елементу dom всього лише застосувати метод jstree з деякими параметрами. У нашому випадку передаємо самі дані в поле data, multiple: false вказує, що нам не потрібно множинне виділення, а check_callback: true говорить про те, що хочемо після зміни дерева щось ще і зробити.