1. Requirements
2. Usage
3. Resources

Collapse Tree provides a comprehensive visual presentation of dependent data in shap of nodes making the view manageable and pleasing on the eye. Expanding and collapsing of nodes is achieved by clicking on the desired node. Can change its presentation style directly from css or extension easily!. You can add many nested nodes as want !!

Requirements ¶

Yii 1.1.13 (Not tested in others)

Usage ¶

Drop this in your extension directory and then call the widget somewhere (in your layout, ...).

/*
 * data: array of data. the data should be in array form 
 * height: height of container
 * width: width of container
 * marginTop: margin-top of container
 * marginBottom: margin-bottom of container
 * marginLeft: margin-left of container
 * marginRight: margin-right of container
 * duration(in ms): time between collapse and expand
 * cradius: circle-radius 
 */
$this->widget('ext.collapsibletree.CollapsibleTree', array(
    'duration'=>500,
     'cradius'=>10,
    'data' => array(
        'name' => 'Root',
        'children' => array(
            0 => array(
                'name' => ' Level 1',
                'children' =>
                array(
                    0 => array(
                        'name' => '  Level 1.1',
                        'children' => array(
                            0 => array('name' => 'Level 1.1.1', 'size' => 3938),
                            1 => array('name' => 'Level 1.1.2', 'size' => 3812),
                            2 => array('name' => 'Level 1.1.3', 'size' => 6714),
                        ),
                    ),
                    1 => array(
                        'name' => 'Level 1.2'
                    ),
                    2 => array(
                        'name' => 'Level 1.3'
                    ),
                ),
            ),
        ),
    ),
));

Resources ¶

• Try out a demo