devgroup/yii2-jstree-widget jsTree widget for yii2

jstreewidgettreenested-sets

yii2-jstree-widget

Code Climate SensioLabsInsight Scrutinizer Code Quality Build Status

jsTree tree widget for yii2.

Current state: unstable.

Description

This extension allows you to display and manage hierarchical data structures from your database using jsTree.

For now following data structure types are supported:

Usage example

For example, we have model Menu that represents our structured data. And MenuController for management purposes.

Adjacency List

In the MenuController:

use devgroup\JsTreeWidget\actions\AdjacencyList\FullTreeDataAction;
use devgroup\JsTreeWidget\actions\AdjacencyList\TreeNodesReorderAction;
use devgroup\JsTreeWidget\actions\AdjacencyList\TreeNodeMoveAction;
...
public function actions()
    {
        return [
            'getTree' => [
                'class' => FullTreeDataAction::class,
                'className' => Menu::class,
            ],
            'menuReorder' => [
                'class' => TreeNodesReorderAction::class,
                'className' => Menu::class,
            ],
            'menuChangeParent' => [
                'class' => TreeNodeMoveAction::class,
                'className' => Menu::class,
            ],
        ];
    }

In your view file call the widget in the right place:

    <?= TreeWidget::widget([
            'treeDataRoute' => ['/menu/getTree', 'selected_id' => $parent_id],
            'reorderAction' => ['/menu/menuReorder'],
            'changeParentAction' => ['/menu/menuChangeParent'],
            'treeType' => TreeWidget::TREE_TYPE_ADJACENCY,
            'contextMenuItems' => [
                'open' => [
                    'label' => 'Open',
                    'action' => ContextMenuHelper::actionUrl(
                        ['/menu/list'],
                        ['parent_id']
                    ),
                ],
                'edit' => [
                    'label' => 'Edit',
                    'action' => ContextMenuHelper::actionUrl(
                        ['/menu/edit']
                    ),
                ]
            ],
        ]) ?>

Getting Data, Reordering and Change Parent actions has default implementations, but you can implement and use your own ones, just by changing a routes 'treeDataRoute', 'reorderAction', 'changeParentAction'.

Nested Set

Nested set can work in single or multy root modes. Single root mode by default. For using multi root mode you have to have tree (or other name you like) column in your database table to store root id. And define this name in all necessary config places (see below).

In the MenuController:

use devgroup\JsTreeWidget\actions\nestedset\FullTreeDataAction;
use devgroup\JsTreeWidget\actions\nestedset\NodeMoveAction;
...
public function actions()
    {
        return [
            'getTree' => [
                'class' => FullTreeDataAction::class,
                'className' => Menu::class,
                'rootAttribute' => 'tree', //omit for single root mode
            ],
            'treeReorder' => [
                'class' => NodeMoveAction::class,
                'className' => Menu::class,
                'rootAttribute' => 'tree', //omit for single root mode
            ],
        ];
    }

In the view file:

    <?= TreeWidget::widget([
        'treeDataRoute' => ['/menu/getTree'],
        'reorderAction' => ['/menu/treeReorder'],
        'treeType' => TreeWidget::TREE_TYPE_NESTED_SET, //important config option
        'contextMenuItems' => [
            'edit' => [
                'label' => 'Edit',
                'action' => ContextMenuHelper::actionUrl(
                    ['/menu/edit']
                ),
            ]
        ],
    ]) ?>

Getting Data and Node Movements actions has the default implementations and are independent from side NestedSet behaviors. But you also can use your own implementation.

TreeWidget will register bundle JsTreeAssetBundle, but you may want to include it as dependency in your main bundle(ie. for minification purpose).

ContextMenuHelper creates JsExpression for handling context menu option click. It automatically adds all data attributes from item link(<a> tag) if it is not specified exactly(as in 'open' menu item).

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



1.3.1 is the latest of 9 releases



MIT license
Stats
15 github stars & 8 github forks
1 downloads in the last day
42 downloads in the last 30 days
10030 total downloads