Yii 1.1: jstree

a widget for the jsTree, a CTreeView enhancement.
5 followers

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 report it
saiprem at 2010/09/16 02:18pm
have some major fixes

please update the extension

#135 report it
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 report it
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 report it
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 report it
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 report it
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 report it
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.

Leave a comment

Please to leave your comment.

Create extension
  • Yii Version: 1.1
  • License: New BSD License
  • Developed by: shocky
  • Category: User Interface
  • Votes: +10 / -9
  • Downloaded: 4,466 times
  • Created on: Sep 20, 2009
  • Last updated: May 28, 2010