collapsibletree

Visualization of dependent data in nodes
47 followers

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

Total 4 comments

#17874 report it
falexio at 2014/08/04 01:51pm
Link sull'ultimo nodo

Se è una funzionalità già presente non l'ho vista; così l'ho aggiunta da solo. Ho inserito nella funzione click un test che permette di inserire i link nei nodi in maniera da poter "navigare" attraverso l'albero generato. COLLAPSIBLETREE.php function click(d) { if (d.href != null) { self.location = d.href; } else { if (d.children) { ..... .... }


Nell'array del widget: 'name' => ' Level 1.1', 'children' => array( 0 => array('name' => 'Level 1.1.1', 'size' => 3938, 'href'=>'Link verso la pagina con la descrizione del Level 1.1.1'),

saluti

#16107 report it
DrMabuse at 2014/01/20 05:58pm
THX

Looks very awesome an performant

#16076 report it
sefburhan at 2014/01/16 11:56pm
@ Scott_Huang

yes, i m trying all these and many more in new version.

#16075 report it
Scott_Huang at 2014/01/16 10:24pm
How to attach event in that tree? Thanks.

Please give more examples: 1. How to attach event in click/double click and so on? 2. How to expand/close all at once? 3. Add check boxes? 4. The lenth between two node too long, I try to set width, but seem not work, any advice? 5. Dynamic remove/add data? 6. balabala...

Thanks.

Leave a comment

Please to leave your comment.

Create extension