PHP code example of yongtiger / yii2-tree-manager

1. Go to this page and download the library: Download yongtiger/yii2-tree-manager library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

yongtiger / yii2-tree-manager example snippets


echo \yongtiger\tree\widgets\TreeView::widget([
    'nodes' => $items,

    ///all the followings are optional
    'options' => [
        'tag' => 'div',         ///set to false to disable the tag
        'class' => 'myclass',
        // more ...
    ],
    'nodesOptions' => [
        'tag' => 'ol',          ///set to false to disable the tag
        'class' => 'myclass',
        // more ...
    ],
    'nodeOptions' => [
        'tag' => 'li',          ///set to false to disable the tag
        'class' => 'myclass',
        // more ...
    ],

    'clientOptions' => [
        'selector' => 'ol.sortable',
        'startCollapsed' => true,
        // more ...
    ],
    'clientEventOptions' => [
        'change' => "function(){ console.log('Relocated item'); }",
        // more ...
    ],

    'nodeActionsOptions' => [
        'tag' => 'span',        ///set to false to disable the tag
        'class' => 'myclass',
        // more ...
    ],
    'nodeActionOptions' => [
        'tag' => 'button',      ///set to false to disable the tag
        // more ...
    ],
    'nodeActions' => [
        'view' => [
            'actionText' => '<span class="glyphicon glyphicon-eye-open"></span>',
            'actionOptions' => [
                'class' => 'btn btn-xs btn-default',
            ],
        ],
        'update' => [
            'actionText' => '<span class="glyphicon glyphicon-pencil"></span>',
            'actionOptions' => [
                'class' => 'btn btn-xs btn-primary',
            ],
        ],
        'create' => [
            'actionText' => '<span class="glyphicon glyphicon-plus"></span>',
            'actionOptions' => [
                'class' => 'btn btn-xs btn-success',
            ],
        ],
        'delete' => [
            'actionText' => '<span class="glyphicon glyphicon-trash"></span>',
            'actionOptions' => [
                'class' => 'btn btn-xs btn-primary',
                'data-confirm' => 'Are you sure you want to delete this item?', ///???i18n
                'data-method' => 'post',
                ///for ajax
                'href' => 'javascript:void(0)',         ///Note: It will override the 'href' of `nodeActionOptions`
                'data-action-url' => '{action-url}',    ///Note: It will be replaced with the URL created using [[createUrl()]]
            ],
        ],
        // more ...
    ],

    'urlCreator' => function ($action, $id, $treeView) {
        // return 'string';
    },
    'controller' => 'category/default',
    
    'nodeNameTemplate' => '<span class="disclose"><span></span></span>{name}',
    'encodeNodeNames' => true,
]);

Array(
    [0] => Array(
        [id] => 1
        [name] => node 1

        ///optional, action urls
        [view-url] => Array(
            [0] => category/default/view
            [id] => 1
        )
        [update-url] => Array(
            [0] => category/default/update
            [id] => 1
        )
        [create-url] => Array(
            [0] => category/default/create
            [id] => 1
        )
        [delete-url] => Array(
            [0] => category/default/delete
            [id] => 1
        )

        [nodes] => Array(
            [0] => Array(
                [id] => 2
                [name] => node 1.1
                // optional, action urls ...
            )
            [1] => Array(
                [id] => 3
                [name] => node 1.2
                // optional, action urls ...
            )
            // more nodes ...
        )
    )
    [1] => Array(
        // ...
    )
)

php composer.phar 

// disableParentChange: false,
// doNotClear: false,
// expandOnHover: 700,
// isAllowed: function() { return true; },
isTree: true,                               ///defaults to false
// listType: "ol",
// maxLevels: 0,
// protectRoot: false,
// rootID: null,
// rtl: false,
// startCollapsed: false,
// tabSize: 20,
// branchClass: "mjs-nestedSortable-branch",
// collapsedClass: "mjs-nestedSortable-collapsed",
// disableNestingClass: "mjs-nestedSortable-no-nesting",
// errorClass: "mjs-nestedSortable-error",
// expandedClass: "mjs-nestedSortable-expanded",
// hoveringClass: "mjs-nestedSortable-hovering",
// leafClass: "mjs-nestedSortable-leaf",
// disabledClass: "mjs-nestedSortable-disabled",