1. Documentation
2. Change Log

This extension is ...

a widget for the jsTree, a CTreeView enhancement.

Download the jstree component from their website (http://www.jstree.com) and extract it under protected/extensions/jsTree. Then download the release file and extract it in the protected/extensions

Requirements ¶

• Yii 1.0.5, 1.0.6, 1.0.7 (tested)
• jsTree 0.9.8
• nestedset (optional)

Resources ¶

• Home page
• Join discussion

Authors note ¶

Though I developed this extension to diaply a treeview of a nestedset model, I'd rather using the jqGrid extension these days. If you just want to display a simple tree and want a few simple functions to manage your tree, this extension might work. But if you want more complex functions to manage your tree, consider using the jqGrid.

Documentation ¶

Requirements ¶

• Yii 1.0.5 or above
• jsTree 0.9.8
• nestedset (optional)

Installation ¶

• Download the jstree component from their website (http://www.jstree.com) and extract it under protected/extensions/jsTree
• Extract the release file under protected/extensions

Usage ¶

See the following code example:

You should prepare hierarchical data. It might be an html view or a database table model.

Case 1: using HTML ¶

controllers/tree.php: ¶

class TreeController extends CController
{
  public function actionTree1()
  {
    $this->render('tree1',array());
  }
}

views/tree/tree1.php: ¶

[html]
<div id="demo1">
  <ul>
   <li id="phtml_1" class="open"><a href="#">Root node 1</a>
    <ul>
      <li id="phtml_2"><a href="#" style="background-image:url('../media/images/ok.png');">Custom icon</a></li>
      <li id="phtml_3"><a href="#">Child node 2</a></li>

      <li id="phtml_4"><a href="#">Some other child node 111</a></li>
    </ul>
   </li>
   <li id="phtml_5"><a href="#">Root node 2</a></li>
  </ul>
</div>
<php?
$this->Widget('application.extensions.jsTree.CjsTree', array(
  'htmlOptions'=>array('id'=>'demo1'),
));
?>

Case 2: using database table ¶

This extension works well with the nestedset extension.

models/tree.php: ¶

class Tree extends CActiveRecord
{
  public function behaviors(){
    return array(
      'Treebehavior' => array(
         'class' => 'application.extensions.nestedset.Treebehavior',
      )
    );
  }
}

controllers/tree.php: ¶

class TreeController extends CController
{
  protected function formatData($tree)
  {
    if($tree->getChildNodes())
      return array('text'=>CHtml::link($tree->name,"#"),'id'=>$tree->id,'expanded'=>true);
    else
      return array('text'=>CHtml::link($tree->name,"#"),'id'=>$tree->id);
  }
  public function actionTree2()
  {
    $data=array();
    $treeList1=tree::model()->findAll();
    foreach ($treeList1 as $i=>$model) {
      $data[$i]=$this->formatData($model);
      $treeList2=$model->getChildNodes();
      foreach ($treeList2 as $j=>$submodel) {
        $data[$i]['children'][]=$this->formatData($submodel);
      };
    };

    $this->render('tree2',array('data'=>$data));
  }
}

views/tree/tree2.php: ¶

$this->Widget('application.extensions.jsTree.CjsTree', array(
'data'=>$data,
));

Appendix ¶

Of course, you can use many jsTree options as follows:

$this->Widget('application.extensions.jsTree.CjsTree', array(
    'data'=>$data,
    'ui'=>array('theme_name'=>'apple'),
    'rules'=>array(
    droppable => "tree-drop",
    multiple => true,
    deletable => "all",
    draggable => "all" 
  ),
  'callback'=>array(
    "onrename"=>"js:function() { alert('Rename'); }",
    "onmove"=>"js:function(NODE,REF_NODE,TYPE,TREE_OBJ,RB) {   alert('Move id:'+NODE.id+' ref:'+REF_NODE.id+' type:'+TYPE+' rb:'+RB); }",
    "oncopy"=>"js:function() { alert('Copy'); }",
    "oncreate"=>"js:function() { alert('Create'); }",
    "ondelete"=>"js:function() { alert('Delete'); }",
    "error"=>"js:function() { }",
    "ondblclk"=>"js:function() { alert('Doubleclick'); TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE); TREE_OBJ.select_branch.call(TREE_OBJ, NODE); }",
    "onrgtclk"=>"js:function() { alert('Rightclick'); }",
    "ondrop"=>"js:function() { alert('Foreign node dropped'); }",
  ),
));

Change Log ¶

2010-05-14: Dimitrios Meggidis ¶

• Add jsTree data property

2009-06-06: Shocky Han ¶

• initial release