Yii 1.1: jstree-behavior

Tree graphic manipulation of an ActiveRecord with NestedSet Behavior using jstree plugin.
22 followers

JsTreeBehavior

© 2013 Spiros Kabasakalis The MIT License (MIT)

JsTreeBehavior

LIVE DEMO

GitHub Repository

Overview

Tree graphic manipulation of an ActiveRecord with NestedSet Behavior using jstree plugin. This is actually a complete rewrite of my NestedSetAdminGUI extension. Instead of gii generated files for every model,I wrote a reusable behavior that provides the same functionality.I also have separated markup from js,and the code is much cleaner now.Many jstree options can be set in JsTreeWidget.php file,you can add more if you wish-I did'nt include them all,there are so many.

Setup.

  • Hide index.php from your requests,if you have'nt done so yet.You can find detailed instructions on how to do this here.(Paragraph 6) Also,in urlManager configuration in config/main.php file set
'urlFormat'=>'path',
 'showScriptName'=>false,
  • Copy the js_plugins folder in webroot folder.I don't like publishing assets.I register css and jss straight from a webroot subfolder.
  • Copy the widgets folder in your protected folder.It contains the JsTreeWidget class and view files.
  • Copy behaviors folder containing NestedSetBehavior.php and JsTreeBehavior.php class file in protected folder.
  • Prepare the database table for your hierarchical ActiveRecord Model. Use the category.sql file (category table) as reference.Columns root,lft,rgt and level are essential for nestedset behavior.Apart from them you will need at least one column to store the label for the tree nodes,for example "name",and a primary key.You can add more columns,(like "description")
  • Create the ActiveRecord class file that corresponds to category,say Category.php.Give it a nested set behavior.In Category.php :

    public function behaviors()
    {
    return array(
       'NestedSetBehavior'=>array(
           'class'=>'application.behaviors.NestedSetBehavior',
           'leftAttribute'=>'lft',
           'rightAttribute'=>'rgt',
           'levelAttribute'=>'level',
           'hasManyRoots'=>true
           ),
    );
    }
  • Copy BaseController.php file to components folder.This controller makes possible for controllers that extend from it to turn behavior inherited functions into actions.

  • Create a controller in protected/controllers folder that extends from BaseController.php,CategoryController and give it a JsTreeBehavior.In CategoryController:

    public function behaviors()
     {
         return array(
             'jsTreeBehavior' => array('class' => 'application.behaviors.JsTreeBehavior',
                 'modelClassName' => 'Category',
                 'form_alias_path' => 'application.views.category._form',
                 'view_alias_path' => 'application.views.category.view',
                     'label_property' => 'name',
                     'rel_property' => 'name'
             )
         );
     }
    • modelClassName is the class name of the ActiveRecord,form_alias_path is alias path of the form view file used to update and create nodes in the tree with fancybox pop ups.view_alias_path is the view file path alias used to show details for a record,(property values). You can easily modify the example files provides to suit your own model.You will only need to change/add input fields. label_property is the model property that will show as label in the tree nodes. rel_property is the model property that will be used as value for the rel property of the li tags in the tree markup.
  • Last, add an action actionTree in Category Controller that renders a tree.php file.In tree.php file render the JsTreeWidget like so

    $this->widget('application.widgets.JsTreeWidget',
                       array('modelClassName' => 'Category',
                                 'jstree_container_ID' => 'Category-wrapper',//jstree will be rendered in this div.id of your choice.
                                 'themes' => array('theme' => 'default', 'dots' => true, 'icons' => true),
                                 'plugins' => array('themes', 'html_data', 'contextmenu', 'crrm', 'dnd', 'cookies', 'ui')
                                             ));
    ?>

    Fot themes and plugins options see jtree documentation

  • Make sure you include jquery.Either uncomment the relevant line in JsTreeWidget or register it somewhwere else in your code.

  • Example files use bootstrap styled markup.Uncomment the relevant line that registers bootstrap.css in JsTreeWidget if it's not already registered somewhere else in your application.
  • Example files provided.
  • To manipulate the tree,navigate to category/tree.Right click on nodes to see available operations.Drag and drop nodes,delete,create,update etc.

    Resources

  • jsTree
  • NestedSetBehavior
  • Fancybox
  • Noty
  • Bootstrap
  • JQueryForm Plugin
  • spin.js

Total 14 comments

#15926 report it
drumaddict at 2013/12/30 05:26am
@Arno S

No need to apologize.You are free to criticize and I am free to answer back.

"My comment was meant to be constructive and make you to understand how others see your code. I found it hard at some point to navigate your code and make it work for my case, which worked out fine."

Just because you found it difficult to navigate my code, does not mean that it is difficult for everybody.

"I saw room for future improvement."

I agree on that.Any piece of code can get better,optimized.I wrote this code to provide a solution for me,offering to the community is a secondary derivative action,therefore there should be no expectations for anything other than the provided code.Developers can always modify and extend.

thanks for appreciating my extension.

#15925 report it
Arno S at 2013/12/30 05:08am
Sorry...

My comment was meant to be constructive and make you to understand how others see your code. I found it hard at some point to navigate your code and make it work for my case, which worked out fine. That's why I started with a complement on your work in the first place...

I saw room for future improvement, please forgive me, it was meant to be constructive and I get the feeling you're overreacting a bit.

#15924 report it
drumaddict at 2013/12/30 04:15am
@Arno S

To answer your criticism:

"It's quite messy code, not structured and padded consequently, makes it hard to read, understand an adjust to your own needs."

That's your point of view.There's at least one extension that makes use of this to build a menu management system,so you may consider the possibilility that you are too lazy to dive in and adapt it to your needs.

"Comments are lacking everywhere."

Not true.There are comments.I won't comment something if it's too obvious.

"You expect your audience to use your (deviating) structure in directories and even admit to not using assets (suggesting that it's a normal way to work); make that last bit of effort to create a more standard extension."

I don't expect anything from my "audience"(Audience?Really?I am not a Rock Star!).I made this extension for my own needs,and just thought that other people could use it,either as it is,or modified/adapted.Changing your directory structure is very easy,even for beginners.Maybe you should familiarize yourself with the framework a little more.After you do your homework you will be able to adapt extensions to your own needs.Remember this is not Joomla land.I won't make any effort as you suggest,because you are not employing me.I never signed any contract that I will be updating or providing consistent support for this extension(although I do it,specially for people who ask for it in a polite,not demanding way.)

"Your example HTML is full of your own classes and id's, perhaps clean that up a bit to a bare minimum example."

Again,I did what I consider best for me.You don't like it?Change it,adapt it.It's easy.You are searching for ready to use code,out of the box?Maybe try Joomla or Drupal.

#15922 report it
Arno S at 2013/12/30 03:37am
It works

It works and I applaud your work on a complex thing like this. The code could do with an major overhaul though:

  • It's quite messy code, not structured and padded consequently, makes it hard to read, understand an adjust to your own needs.
  • Comments are lacking everywhere.
  • You expect your audience to use your (deviating) structure in directories and even admit to not using assets (suggesting that it's a normal way to work); make that last bit of effort to create a more standard extension.
  • Your example HTML is full of your own classes and id's, perhaps clean that up a bit to a bare minimum example.
#14980 report it
Denis Seghetti at 2013/09/26 03:21am
How the view.php file works?

I'm working well with the tree.php file.

How can i use the view.php file?

#14946 report it
gb5256 at 2013/09/23 06:19pm
Autoselect new node

@drumaddict,

I just had a look at the output in FireBug. The action /controller/createnode is returning a JSON string:

{"success":true,"id":"16097"}

I have checked it and the ID it returns is the ID of the newly created node.

Does anybody know how I can access this return JSON string? I do know that there is a function within jstree where you can select a node by ID, so that should work. But how to get the returned string?

Any ideas?

gb5256

#14945 report it
drumaddict at 2013/09/23 03:31pm
@gb5256 autoselect newly created node.

Thanks for appreciating my extension. Frankly,I never considered autoselecting the newly created node as something essential.I don't know if it's possible.I suggest that you look up jstree documentation,and if it's possible,modify my extension for your own needs! Cheers!

#14944 report it
gb5256 at 2013/09/23 03:21pm
Autoselect new node

Hello, I really love this behaviour. Thanks for providing this.

I do have one question: How can I autoselect the newly created node? I have some knowledge of jstree from a previous project, but in your extension (as far as I understand) the creation does take please outside the create.jstree function.

Does anybody know how to autoselect the last newly created node?

thanks for any ideas about this.

gb5256

#14851 report it
drumaddict at 2013/09/14 03:59pm
Fixed Undefined index: name (/var/yii/backend/views/category/_form.php

Fixed _form.php so that it does not raise a coding standard error due to strict error reporting.

#14630 report it
Herode at 2013/08/30 09:38am
action fetchTree

Nice work ! In the setup on the controller, one should also allow some actions if the accessControl filter is enabled : fetchTree, returnForm, returnView, etc.

#14350 report it
marvix at 2013/08/05 07:25pm
how ?

Hi,

can anyone PLEASE explain how to do this : Create a controller in protected/controllers folder that extends from BaseController.php,CategoryController and give it a JsTreeBehavior.In CategoryController:

Also, there is not logical sql query, and getting this error: CDbCommand failed to execute the SQL statement: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'AND t.rgt>) AND (t.root=NULL) ORDER BY t.rgt LIMIT 1' at line 1. The SQL statement executed was: SELECT * FROM category t WHERE (t.lft< AND t.rgt>) AND (t.root=:ycp0) ORDER BY t.rgt LIMIT 1

How this can do this query : (t.lft< AND t.rgt>) ??

Thanks

#14213 report it
gb5256 at 2013/07/26 06:05pm
returnTree error

Hello, just starting with this extension, looks great. I can successfully move, rename and delete. But when I try to create, nothing happens. FireBug shows that it tries to call /category/returnTree. This is the exact error Undefined index: name (/var/yii/backend/views/category/_form.php:85) Can anybody give me a hint? Thanks, gb5256

#12038 report it
yonghan at 2013/02/22 12:53pm
It's great

Hi,thanks for the extension

#11967 report it
Pasta at 2013/02/16 11:32am
This is good extension!

It works fine

Leave a comment

Please to leave your comment.

Create extension