jstree | Extension | Yii Framework

Requirements

Resources

Authors note

2010-05-14: Dimitrios Meggidis

2009-06-06: Shocky Han

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 ¶

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:

<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

Total 7 comments

#96

saiprem at 2010/09/16 02:18pm

have some major fixes

please update the extension

#135

peili at 2010/08/30 12:30pm

jsTree problem

Can you please update the extension with current version of jsTree v.1.0RC2

Yes, that would be awesome!

#292

saiprem at 2010/07/16 12:29pm

jsTree Problem

Hi Shocky Han,

Extension works fine, but have some major issues with jsTree, Can you please update the extension with current version of jsTree v.1.0RC2

Thank you

#371

luc at 2010/06/23 09:43am

how to update the tree completely ?

Hi, ok, extension works well with the nested set extension. I ask myself on how to update completely a nested set after having manipulating it with the jstree ???

(I've asked the same question on the nested set extension).

#657

jerry2801 at 2010/03/27 11:38am

jsTree.v.0.9.9a2 latest

jsTree.v.0.9.9a2.zip

is the latest stable version

can you update the extension? thankyou!

#992

ptoly at 2010/01/13 05:23pm

Incomplete

Documentation is incorrect:

$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"

The array strings should be surrounded by quotes.

Documentation is poor.
Plugins feature does not work.

I can't seem to get many other settings to work (though this may be my experience level).

#1092

seb at 2009/12/11 03:39am

Thanks

Very good extension when you need to display tree stucture. Integration with netstedset extension makes this extension even more useful.

Please login to leave your comment.

jstree Follow @yiiframework

Requirements ¶

Resources ¶

Authors note ¶

Documentation ¶

Requirements ¶

Installation ¶

Usage ¶

Case 1: using HTML

controllers/tree.php:

views/tree/tree1.php:

Case 2: using database table

models/tree.php:

controllers/tree.php:

views/tree/tree2.php:

Appendix

Change Log ¶

2010-05-14: Dimitrios Meggidis ¶

2009-06-06: Shocky Han ¶

Total 7 comments

Leave a comment

Yii Supporters