yii2-extension jstree

johnnylei/jstree

Yii2 extension js tree

yii extension js tree

install, _(*1)

composer require --prefer-dist johnnylei/jstree

jstree相关配置参照官方文档https://www.jstree.com/, _(*2)

直接使用, _(*3)

<?= \common\widgets\jsTree\JsTree::widget([
    'options'=>[
        'core' => [
            'data' => [
                "text" => "Root node",
                "children" => [
                    [
                        "text" => "Child node 1",
                        "data"=>"name1",
                    ],
                    [
                        "text" => "Child node 2",
                        'data'=>'name2'
                    ],
                    [
                        "text" => "Child node 3",
                        'data'=>'name3',
                    ],
                ]
            ]
        ]
    ],
])?>

使用在active form里面, _(*4)

<?= $form->field($model, 'content')->widget(ActiveFormJsTree::className(), [
    'options'=>[
        'core' => [
            'data' => [
                "text" => "Root node",
                "children" => [
                    [
                        "text" => "Child node 1",
                        "data"=>"name1",
                    ],
                    [
                        "text" => "Child node 2",
                        'data'=>'name2'
                    ],
                    [
                        "text" => "Child node 3",
                        'data'=>'name3',
                    ],
                ]
            ]
        ]
    ],
])?>

在form表单里面使用, _(*5)

<?= FormJsTree::widget([
    'inputOptions'=>[
        'class' => 'form-control',
        'style'=>[
            'display'=>'none',
        ],
        'name'=>'MoveForm[parent]',
        'value'=>$parent,
    ],
    'options'=>[
        'core' => [
            'data' => [
                "text" => "Root node",
                "children" => [
                    [
                        "text" => "Child node 1",
                        "data"=>"name1",
                    ],
                    [
                        "text" => "Child node 2",
                        'data'=>'name2'
                    ],
                    [
                        "text" => "Child node 3",
                        'data'=>'name3',
                    ],
                ]
            ],
        ]
    ],
]);?>