Открытие узлов дерева через AJAX

Сегодня разговор снова пойдет про деревья :) Наткнулась мне заметка  «Display an AJAX tree from your DB using CtreeView» которую я решил рассказать у себя на DbHelp...

В этой статье мы научимся создавать дерево на yii (через CtreeView) заполняя его данными из базы. Но самое интересное во всем этом — мы будем использовать AJAX при открытии узлов, тем самым уменьшив нагрузку на базу.

ПОСМОТРЕТЬ DEMO

НАЧНЕМ

Для начала нам нужно создать таблицу в базе где и будут узлы дерева. Вариант дерева id-id_parent я очень часто использую в своих статьях, поэтому вы уже должны быть немного «в теме» :)

Заходим в базу и создаем новую таблицу:

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

id – номер узла в дереве
name – название узла
parent_id – id узла родителя, которому подчиняется наш узел

КОНТРОЛЛЕР

В вашем контроллере должно быть два метода, первый (actionTree) — который будет рендерить виджет на экран и второй (actionAjaxFillTree) — который будет заниматся «открытием» дерева.

    public function actionTree()
    {
        // рендерим файлик отображения tree.php
        $this->render('tree');
    }

    public function actionAjaxFillTree()
    {
        // если пробуют получить прямой доступ к экшину (не через ajax)
        // тогда обрубаем "крылья")) т.е. возвращаем белую страницу
        if (!Yii::app()->request->isAjaxRequest) {
            exit();
        }
        // с какого узла начинаем вывод дерева? 0 - с первого
        $parentId = 0;
        if (isset($_GET['root'])) {
            // переменная $_GET['root'] говорит нам о том, по какому узлу в дереве
            // кликнули. Исходя из этого получаем данные детей (подкатегорий)
            $parentId = (int) $_GET['root'];
        }
        // сам запрос на получение данных детей (через обычный LEFT JOIN)
        $req = Yii::app()->db->createCommand(
            "SELECT m1.id, m1.name AS text, m2.id IS NOT NULL AS hasChildren "
            . "FROM tree AS m1 LEFT JOIN tree AS m2 ON m1.id=m2.parent_id "
            . "WHERE m1.parent_id <=> $parentId "
            . "GROUP BY m1.id ORDER BY m1.name ASC"
        );
        $children = $req->queryAll();
        // возвращаем данные
        echo str_replace(
            '"hasChildren":"0"',
            '"hasChildren":false',
            CTreeView::saveDataAsJson($children)
        );
        exit();
    }

Я написал комментарии к коду что б вам было легче понять к чему там дело. На самом деле все достаточно просто:

• При первом входе на localhost/controller/tree/ происходит простой рендер дерева на экран и заполняется узлами первого уровня
• При клике на узел дерева — происходит обращение к методу actionAjaxFillTree() для получения детей следующего узла

VIEW

В файле view/controller/tree.php просто инициализируем виджет:

<?php
$this->widget(
    'CTreeView',
    array('url' => array('ajaxFillTree'))
);>

И ЧТО ТЕПЕРЬ?

Добавтие в таблицу `tree` пару узлов с нулевым parent_id (т.е. первый уровень). Затем создайте несколько узлов со значениями parent_id = id узлов первого уровня. Например как у меня:

INSERT INTO `tree` (`id`, `name`, `parent_id`) VALUES
(10, 'молоко', 8),
(9, 'мед', 8),
(8, 'я НЕ люблю', 0),
(7, 'я люблю', 0),
(11, 'солнце', 8),
(12, 'море', 8),
(13, 'людей', 7),
(14, 'природу', 7),
(15, 'воздух', 7),
(16, 'спорт', 7),
(17, 'Футбол', 16),
(18, 'Биатлон', 16),
(19, 'Прыжки на лыжах с трамплина', 16),
(20, 'Сноубординг', 16);

После чего открывайте localhost/controller/tree и пробуйте как все красиво работает :)

Ссылки:

• Display an AJAX tree from your DB using CTreeView [англ]
• Учимся создавать красивые деревья! (CTreeView) [рус.]
• Демо