README

jsTree树形小部件用于yii2。

当前状态：不稳定。

描述

此扩展允许您使用jsTree从数据库中显示和管理层次数据结构。

目前支持以下数据结构类型

• 邻接表;
• 嵌套集.

使用示例

例如，我们有一个表示结构化数据的Menu模型。以及用于管理的MenuController。

邻接表

在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,
            ],
        ];
    }

在您的视图文件中，在正确位置调用小部件

    <?= 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']
                    ),
                ]
            ],
        ]) ?>

获取数据、重新排序和更改父级动作有默认实现，但您可以更改路由 'treeDataRoute', 'reorderAction', 'changeParentAction' 来实现和使用自己的。

嵌套集

嵌套集可以在单根或多根模式中工作。默认为单根模式。要使用多根模式，您必须在数据库表中有一个 tree（或您喜欢的其他名称）列来存储根ID。并在所有必要的配置位置定义此名称（见下文）。

在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
            ],
        ];
    }

在视图文件中

    <?= 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']
                ),
            ]
        ],
    ]) ?>

获取数据和节点移动动作有默认实现，并且独立于 NestedSet行为 的一侧。但您也可以使用自己的实现。

TreeWidget 将注册 JsTreeAssetBundle 包，但您可能希望将其作为依赖项包含在主包中（例如，用于压缩目的）。

ContextMenuHelper 为处理上下文菜单选项点击创建 JsExpression。如果未指定（如在'打开'菜单项中），它将自动添加来自项目链接（<a> 标签）的所有 data 属性。