Учимся создавать красивые деревья! (CTreeView)

Давайте сегодня поговорим о составлении древовидной структуры средствами встроенного в Yii класса CTreeView.

Сегодня просматривал официальный форум фреймворка и в одном из своих постов нашел старый набросок кода. Его я кидал в качестве примера использования CTreeView для одного из пользователей. Я решил объединить этот код в некую заметку для читателей моего блога.

После прочтения этого урока вы научитесь делать такое:

Такое:

И даже такое:

Приступим...

Для того что бы отобразить нечто из того что я нарисовал выше — нам надо инициализировать виджет на странице одного из отображений вашего сайта. Примерно следующим образом:

$this->widget('CTreeView', array('data' => $my_data));

Параметру 'data' передается переменная $my_data, которая сообщяет виджиту о желаемой структуре дерева. Переменную $my_data мы можем определить сразу над вызовом виджета, либо передать с контроллера. Я для простоты объявляю сверху:

$my_data = array(
    array(
        'text'     => 'Node 1',
        'expanded' => true, // будет развернута ветка или нет (по умолчанию)
            'children' => array(
                 array(
                    'text'     => 'Node 1.1',
                 ),   
                 array(
                    'text'     => 'Node 1.2',
                 ),   
                 array(
                    'text'     => 'Node 1.3',
                 ),             
            )
    ),
);

$this->widget('CTreeView', array('data' => $my_data));

Запускаем и смотрим. Должно было получится что то вроде этого:

Как вы понимаете вложенность массива не ограничивается. Вы можете вставлять детей используя параметр children. Если хотите что б ветка с детьми была по умолчанию свёрнута — используйте параметр expanded

Я немного усложнил код, чтобы вы смогли лучше понять что я хочу этим всем сказать:

$my_data = array(
    array(
        'text'     => 'Node 1',
        'expanded' => true, // будет развернута ветка или нет (по умолчанию)
            'children' => array(
                 array(
                    'text'     => 'Node 1.1',
                    'expanded' => false, // будет развернута ветка или нет (по умолчанию)
                        'children' => array(
                             array(
                                'text'     => 'Node 1.1.1',
                             ),             
                        )
                 ),   
                 array(
                    'text'     => 'Node 1.2',
                    'expanded' => true, 
                        'children' => array(
                             array(
                                'text'     => 'Node 1.2.1',
                                'expanded' => true,
                                    'children' => array(
                                         array(
                                            'text'     => 'Node 1.2.2.1',
                                            'expanded' => true, 
                                                'children' => array(
                                                     array(
                                                        'text'     => 'Node 1.2.2.1.1',
                                                     ),             
                                                )
                                         ),             
                                    )
                             ),             
                        )
                 ),   
                 array(
                    'text'     => 'Node 1.3',
                    'expanded' => true, 
                        'children' => array(
                             array(
                                'text'     => 'Node 1.3.1',
                             ),             
                        )
                 ),             
            )
    ),
);

получилось:

Дальше — интереснее...

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

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

$my_data = array(
    array(
        'text'     => 'Node 1',
            'children' => array(
                 array(
                    'text'     => 'Node 1.1',
                        'children' => array(
                             array(
                                'text' => 'Node 1.1.1',
                             ),             
                        )
                 ),    
                 array(
                    'text'     => 'Node 1.2',
                        'children' => array(
                             array(
                                'text' => 'Node 1.2.1',
                             ),             
                        )
                 ),           
            )
    ),
);

$this->widget('CTreeView', array('data' => $my_data, 'htmlOptions' => array('class' => 'treeview-red')));

Как вы видите я использовал встроенный класс treeview-red. Вы можете попробовать все, из существующих в данный момент:

1. treeview-gray
2. treeview-red
3. treeview-famfamfam
4. filetree
5. treeview-black

Давайте теперь попробуем использовать свой собственный класс, для оформления дерева, ведь это очень просто!

<style>
.my-class {
    border: 3px solid #000;
    background: #CCC;
    padding: 5px;
    width: 300px;
}
</style>
<?
$my_data = array(
    array(
        'text'     => 'Node 1',
            'children' => array(
                 array(
                    'text'     => 'Node 1.1',
                        'children' => array(
                             array(
                                'text' => 'Node 1.1.1',
                             ),             
                        )
                 ),    
                 array(
                    'text'     => 'Node 1.2',
                        'children' => array(
                             array(
                                'text' => 'Node 1.2.1',
                             ),             
                        )
                 ),           
            )
    ),
);

$this->widget('CTreeView', array('data' => $my_data, 'htmlOptions' => array('class' => 'my-class')));

Посмотрите на структуру в которой вы получаете дерево. Поэкспериментируйте с CSS, и вы получите совершенно уникальное дерево!

Конец

Прочитав немного API по классу CTreeView, вы найдете еще кучу интересных вещей! Вроде параметра animated для плавного открытия узлов и др. :)

Вот и все!
Постоянно учитесь и делайте свои сайты лучше!