README

jsTree for Yii2 是一个扩展，用于通过 jsTree 显示和处理 ActiveRecord 模型。

使用 AJAX 加载树形数据并显示树
为不同的树节点定义图标（例如使用 FontAwesome）
上下文菜单，包括更新、重命名和删除
通过拖放移动树节点
上下文子菜单，包含不同的节点类型
动态上下文菜单，可以删除特定类型的项
单独的文本和上下文菜单消息

安装

安装此扩展的首选方式是通过 composer。

或者运行

php composer.phar require --prefer-dist kasoft/yii2-jstree "1.0.14"

或者添加

"kasoft/yii2-jstree": "1.0.14",

到您的 composer.json 文件的 require 部分。

无模型使用（仅 JSON）

简单版本仅显示通过提供的 json url 提供的树。您必须通过一个 url 提供json数据

$tree = new \kasoft\jstree\JsTree([
    'jsonUrl' => '/my_jsonurl/data/whatever',
]);

<div id="jstree"></div>

使用 Yii2 模型

如果您想使用此扩展从数据中显示树，进行如移动、创建、删除、重命名等操作，并通过点击打开表单视图，请使用此版本。

在开始之前，检查您的数据库或模型！您是否有所有必需的字段？

除了数据库（与 MySQL 进行了测试）和一组用于排序和构建树的字段外，还需要一个 DIV 来显示树。扩展会为您处理创建、移动、重命名和删除。单击树项将在另一个 div 中显示表单以编辑数据。

请参阅 "demo" 文件夹中的测试设置！

设置您的数据库，包括所需的字段（可以有不同的名称）*名称 - 在树中显示的名称或标题（必需）*parent_id - 用于嵌套树的ID（必需）*位置 - 用于排序树项（必需）*类型 - 项目的类型，用于图标和权限（可选）

使用这些字段设置您的模型。重要：只有名称是必需字段！否则，"新建"的上下文菜单可能无法正常工作。

将以下内容添加到您的控制器中。所有带有(*)的项都是必需的！

<?
public function actionIndex() {
        $tree = new \kasoft\jstree\JsTree([
            'modelName'=>'backend\models\MY_MODEL_NAME',    // * Namespace of the Model
            'modelPropertyId' => 'id'                       // * primary Key
            'modelPropertyParentId' => 'parentId',          // * Parent ID for tree items
            'modelPropertyPosition' => 'position',          // *for sorting items
            'modelPropertyName' => 'name',                  // * Fieldname to show
            'modelFirstParentId' => NULL,                   // * ID for the Tree to start
            'modelPropertyType' => 'type',                  // Item type (for Icon and jsTree rights)
            'controllerId' => 'index',                      // Controler Actions which should handle everything
            'jstreeDiv' => '#jstree',                       // DIV where the Tree will be displayed
            'jstreeIcons' => false,                         // Show Icons or not
            'jstreePlugins' => ["contextmenu", "dnd",..],   // Plugins to be load
            'jstreeContextMenue' => [                       // Define individual menu
                "remove" => [
                    "text" => "Delete",
                    "icon" => "glyphicon glyphicon-plane",
                ],
                "edit" => [
                    "text" => "Edit",
                    "icon" => "glyphicon glyphicon-picture",
                ],
                "create" => [
                    "text" => "Create new",
                    "icon" => "glyphicon glyphicon-barcode",
                    "type"=> "online",
                    "submenu" => [                          //Define submenu for creating node types
                        ["text"=>"Create new with Type offline","icon" => "glyphicon glyphicon-barcode","type"=>"offline"],
                        ["text"=>"Create new with Type online","icon" => "glyphicon glyphicon-plane", "type"=>"online"],
                        ["text"=>"Create new with Type default","glyphicon glyphicon-volume-up","type"=>""],
                    ]
                ],
                "rename" => [
                    "text" => "Rename",
                    "icon" => "glyphicon glyphicon-volume-up",
                ],
            ],
            'jstreeType' => [                               // jsTree Type Options
                "#" => [
                    "max_children" => -1,
                    "max_depth" => -1,
                    "valid_children" => -1, 
                    "icon" => "glyphicon glyphicon-th-list"
                ],
                "default" => [
                    "icon" => "glyphicon glyphicon-question-sign"
                ],
            ],
            'jstreeMsg' => [                                // Individual Alert Messages
                    "confirmdelete" => "Are you sure? Delete?",
                    "nothere" => "Not possible at this Position!",
                ]
        ]);
        
        return $this->render('index');
    }
 ?>

将此内容放入index视图文件中。点击一个项将委托更新操作到结果字段。此外，表单应该有一个名为"jstree-form"的类，以便将表单提交的结果委托到div。

<div id="jstree"></div>
<div class="result"></div>

kasoft / yii2-jstree

维护者

详情

README

安装

最新消息

无模型使用（仅 JSON）

使用 Yii2 模型