Yii 1.1: gtreetable

A wrapper for bootstrap-gtreetable, Twitter Bootstrap 3 plugin.
6 followers

Yii-GTreeTable is extension of Yii framework which is wrapper for bootstrap-gtreetable plugin, on the other hand provides support to server side application.

Thanks to software it's possible to map actual state of nodes to data base.

Test available on demo project.

yii2-gtreetable screenshot

For Yii 2 see yii2-gtreetable.

Requirements

  • PHP 5.2 or above,
  • Yii 1.1 or above,
  • Twitter Bootstrap 3.

Installing and configuring

See project page.

Resources

Total 7 comments

#16573 report it
gilek at 2014/03/07 02:44am
Re: Should tree table be created?

Hi Daniel,

I'm glad you liked it. I hope it has been helpful.

My extension uses another extension named nestedset.

Please, go to the project page and see documentation. There you can find all information about significance lft and rgt columns.

Sorting nodes by name may be achieved by:

a. Defining new scope in tree model:

public function scopes() {
    return array(
        'sorted'=>array(
            'order'=>'`name` ASC'
        )
    );
}

b. Changing code in nodeChildrenAction:

$nodes = $root ? array($parent) : $parent->children()->findAll();

to

$nodes = $root ? array($parent) : $parent->children()->sorted()->findAll();

At this moment there in no possibility to define addition column. In nearest future it will be fixed.

#16560 report it
Daniel at 2014/03/05 04:47pm
Should tree table be created?

Hi gilek,

Great extension. I want to use this to display Chart of Accounts on my Accounting app. The situation is that I have accounts table. Since accounts are hierarchical, displaying them on CGridView would not be appropriate. The idea is to show accounts using gtreetable. On click the node, it will show the detail (CDetailView). The tree would be read only and the detail view might be combined with editable so that user can update straight away. Delete is also handle separately from the tree since deleting a node which has children would not be allowed.

Questions: 1. Do I need a tree table to handle the tree? I can get the level from the code directly since I can store the level on account table or usually I calculate the level from the number of "." on the code field of account table. The code rule is First level is using 1, 2, 3, ... second level is 1.1, 1.2, ..., 1.10, 1.11, 2.1, 2.2,..... third level is 1.1.1, 1.1.2,.....

  1. On tree table, it was defined a lft and rgt. What are their significance? I want to display the chart in the sorted ascending.

  2. On the example, the node only shown one column per row, category. Is that possible to show Account code, name, normalbalance on the table per row (multiple columns on one row)?

Thank you.

Daniel

#16449 report it
gilek at 2014/02/24 12:52pm
Re: How to update custom fields

Update: Since version 1.2a you can define custom action, for example:

<?php $this->widget('ext.gtreetable.EGTreeTable',array(
    'htmlOptions'=>array('id'=>'tree1'),
    'options'=>array(
        'source' => "js:function(id) { 
            return '".$this->createUrl('gtreetable/nodeChildren')."'+'?id='+id; 
        }",
        'actions'=>array(
            array(
                'name'=>'Something',
                'event'=>'js:function(node) {
                    /* code */
                }'
            ),
        )
 
    ),
)) ?>

I don't know at which point it should be changed. Whether, after saving or on demand? If the latter, I think, you should add new action. Unfortunately at this moment, there is no possibility to define it directly in plugin. Maby in the near future I will correct it.

Anyway, I know only about one solution, but is very unsightly.

1. You must define new template

<?php $this->widget('ext.gtreetable.EGTreeTable',array(
    'htmlOptions'=>array('id'=>'tree1'),
    'options'=>array(
        'source' => "js:function(id) { 
            return '".$this->createUrl('gtreetable/nodeChildren')."'+'?id='+id; 
        }",         
        'template'=>'<table>
            <tr class="node node-collapsed">
                <td>
                    <span><span class="node-indent"></span><i class="node-icon glyphicon glyphicon-chevron-right"></i><i class="node-icon-selected glyphicon glyphicon-ok"></i><span class="node-name"></span></span>
                    <span class="hide node-action">
                        <input type="text" name="name" value="" style="width: 60%" class="form-control" />
                        <button type="button" class="btn btn-sm btn-primary node-save">Save</button>
                        <button type="button" class="btn btn-sm node-saveCancel">Cancel</button>
                    </span>
                    <div class="btn-group pull-right">
                    <button type="button" class="btn btn-sm btn-default dropdown-toggle node-actions" data-toggle="dropdown">Actions<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation" class="dropdown-header">Actions</li>
                        <li role="presentation"><a href="#notarget" class="node-create" tabindex="-1">Add</a></li>
                        <li role="presentation"><a href="#notarget" class="node-update" tabindex="-1">Edit</a></li>
                        <li role="presentation"><a href="#notarget" class="node-delete" tabindex="-1">Delete</a></li>
                        <li role="presentation"><a href="#notarget" class="node-something" tabindex="-1">Something</a></li>                     
                    </ul>
                    </div>
                </td>
                </tr>
            </table>',          
    )
)) ?>

2. Next handle action.

<script>
    jQuery(document).ready(function() {
        jQuery('.node-something').live('click',function() {
 
            console.log(jQuery(this).parents('.node').data());
            // open modal dialog
        });
    });
</script>
#16434 report it
pravi at 2014/02/22 11:47am
How to update custom fields

I have a scenario where I need to update additional fields in 'tree' table. How this can be achieved?

#16416 report it
gilek at 2014/02/20 02:29pm
Re2: Very Nice extension

Alos in 'NodeChildrenAction' class Line# 21, 'Unit' can be specified dynamically

Of course! Thank you.

#16406 report it
gilek at 2014/02/20 06:57am
Re: Very Nice extension.

This problem occurs in Chrome. I will be soon repaired.

#16401 report it
pravi at 2014/02/19 10:57pm
Very Nice extension.

It is simple and light-weight extension and easily implemented for nested set administration. It would be nice to further enhance the view of the tree. Here parent node and its children are shown as in the same level. I cant see any space before child nodes like in the given snapshot.

Alos in 'NodeChildrenAction' class Line# 21, 'Unit' can be specified dynamically as:

get_class($model)->TYPE_ROOT

Overall, nice contribution. Thank you.

Leave a comment

Please to leave your comment.

Create extension