Yii AIOTree

AIOTree - All-In-One-Tree In Yii Framework I am creating this tree extension based on my experience. When i need different types of tree view, i am creating different widget for different tree like label tree, radio button and checkbox. So it was taking lot of time for me. Then i created All in one tree (AIOTree). I think it may helpful for your project. Documetation Topics are

Data

$data - Using this parameter we can assign our input multidimensional array to AIOTree. The array key is current tree id and it contains parentid, display text.

Syntax

$data=array(
        $id=>array('parentid'=>'','text'=>$text)
);

Example

<?php
$data=array(
    '1'=>array('parentid'=>'','text'=>'One'),
    '2'=>array('parentid'=>'','text'=>'Two'),
    '3'=>array('parentid'=>'','text'=>'Three'),
    '11'=>array('parentid'=>'1','text'=>'One-One'),
    '12'=>array('parentid'=>'1','text'=>'One-Two'),        
);
// AIOTree
Yii::import("application.extensions.AIOTree.*");
    $this->Widget('AIOTree',array(    
        'data'=>$data,
    ));
?>    

Use this '$data' array for below topics.

Tree Type

AIOTree contains three types of tree. They are 'label','checkbox' and 'radio' tree. We can set this using 'type' parameter.

<?php
// AIOTree
Yii::import("application.extensions.AIOTree.*");

$this->Widget('AIOTree',array(    
        'data'=>$data,
        'type'=>'checkbox',//'radio','label'                
    ));
?>    

Parent Tag For Tree

'div' is the default parent tag. If you want you can remove the parent, modify the class, id, style etc of parent div.

Class Parameters

public $parentShow=true;
public $parentTag='div';
public $parentClass='';
public $parentId='';
public $parentStyle='';
public $parentHtmlOptions=array();

Exapmle

<?php
// AIOTree
Yii::import("application.extensions.AIOTree.*");

$this->Widget('AIOTree',array(    
        'data'=>$data,
        'type'=>'checkbox',//'radio','checkbox'
        'parentShow'=>true,// default true', false to remove header
        'parentTag'=>'div',//default 'div'                
        'parentClass'=>'TreeParent_Class',
        'parentId'=>'TreeParent_ID',
        'parentStyle'=>'color:red;font-size:14px;',
        'parentHtmlOptions'=>array(
            'data-role'=>'tree-role',
        )
    ));
?>    

Tree Header

Tree Header is option. We can assign the header text using 'header' parameter. Change the header style using 'aiotree_header' ID.

<?php
Yii::import("application.extensions.AIOTree.*");
    
$this->Widget('AIOTree',array(
        'model'=>$model,
        'attribute'=>'category',    
        'data'=>$data,
        'type'=>'checkbox',//'radio','checkbox'
        'header'=>'Checkbox Tree',          
    ));
?>        

Tree Controls

Tree Controls have default two values. They are expand and collapse. Using this properties we can change the style and text of controls.

Class Parameters

/** TREE CONTROL COLLAPSE EXPAND **/
       
/** set controll params for collapse and expand**/
public $controlShow=true;
public $controlTag='div';
public $controlClass='';
public $controlId='aiotree_control';
public $controlStyle='';
public $controlLabel=array();//collapse, expand
public $controlDivider='|';
public $controlHtmlOptions=array();

Exapmle

<?php
Yii::import("application.extensions.AIOTree.*");

$this->Widget('AIOTree',array(
        'model'=>$model,
        'attribute'=>'category',    
        'data'=>$data,
        'type'=>'checkbox',//'radio','checkbox'
        'controlStyle'=>'border: 1px solid;',
        'controlDivider'=>'<img src="divider_img.png" />
        'controlLabel'=>array(
            'collapse'=>'Collapse Category',
            'expand'=>'Expand Category'
        ),   
    ));
?>

Tree (UL) Properties

Tree view created using html "UL" list. We can change the ul attributes using below parameters 'TreeId' is mandatory. Different tree based on different id.

Class Parameters

public $TreeClass='';
public $TreeStyle='';
public $TreeId='';//required
public $TreeHtmlOptions=array();

<?php
Yii::import("application.extensions.AIOTree.*");

$this->Widget('AIOTree',array(
        'model'=>$model,
        'attribute'=>'category',    
        'data'=>$data,
        'type'=>'checkbox',//'radio','checkbox'
        'TreeClass'=>'treeul_class',
        'TreeId'=>'category_tree',   
    ));
?>

List Properties

Tree list created using html "li" of "ul".

Class Parameters

/** LI CALSS AND STYLE ID **/
public $liListClass='';
public $liListId='';
public $liListStyle='';
public $liHtmlOptions=array();

<?php
Yii::import("application.extensions.AIOTree.*");

$this->Widget('AIOTree',array(
        'model'=>$model,
        'attribute'=>'category',    
        'data'=>$data,
        'type'=>'checkbox',//'radio','checkbox'
        'liListClass'=>'tree_li_class',
    ));
?>

selectParent For Checkbox

'AIOTree' class variable '$selectParent' is only for checkbox tree. Default value is false. If it is true, parent will be selected When you select child.

AIOTree Extension

Create 'AIOTree' folder inside 'extensions' folder. Create new class 'AIOTree' inside 'AIOTree' folder. Copy and paste below code into 'AIOTree' class file.