A tree management module based on nested sets offering tree maintenance with treeview input.
An enhanced tree management module from Krajee with tree node selection and manipulation using nested sets. The extension features are listed below:
- A complete tree management solution which provides ability to manage hierarchical data stored using nested sets. Utilizes the yii2-nested-sets extension to manage the tree structure in your database. Refer the documentation for yii2-nested-sets extension before you start using this module.
- A tree view built from scratch entirely without any third party plugins. The TreeView is designed using HTML5, jQuery & CSS3 features to work along with Yii PHP framework.
- Styled with CSS3, includes jquery transitions and loading sections for ajax content, includes embedded alerts, and utilizes bootstrap css.
- Tree management feature options and modes:
- View, edit, or administer the tree structure using TreeView widget as a selector and a dynamically rendered form to edit the tree node
- The form works as both a detail view for the node OR as a management tool to add/edit/delete the node.
- Form is rendered via ajax. It intelligently uses caching when the same node is clicked again (unless, the nodes are modified).
- Unique Admin Mode for allowing administrator actions on tree.
- Ability to add, edit, or delete tree nodes
- Ability to reorder tree nodes (move up, down, left or right).
- Configure tree node icons, styles, and ability to add checkboxes to tree nodes
- i18N translations enabled across the module.
- Bonus: Includes a TreeViewInput widget that allows you to use the treeview as an input widget. The TreeViewInput widget is uniquely designed by Krajee (using jQuery & PHP with HTML5/CSS) to appear as a dropdown selection menu. It allows multiple selection or single selection of values/nodes from the tree.
- A Tree model that builds upon the yii2-nested-set model and is made to be easily extensible for various use cases. It includes prebuilt flags for each tree node. Check the Tree Model documentation for more.
- active: whether a tree node is active (if soft delete is enabled, the tree node will be just inactivated instead of deleting from database).
- selected: whether a tree node is selected by default.
- disabled: disables a tree node for editing or reorder
- readonly: a read only tree node that prevents editing, but can be reordered or moved up/down
- visible: whether a tree node is visible by default.
- collapsed: whether a tree node is collapsed by default.
- movable_u: whether a tree node is allowed to be movable up.
- movable_d: whether a tree node is allowed to be movable down.
- movable_l: whether a tree node is allowed to be movable left.
- movable_r: whether a tree node is allowed to be movable right.
- removable: whether a tree node is removable - will not be removed if children exist. If soft delete is enabled, then the node will be inactivated - else removed from database.
- removable_all: whether a tree node is removable with children. If soft delete is enabled, then the node and its children will be inactivated - else removed from database.
Key classes available with the module:
- kartik\tree\Module: Module, allows you to configure the module. You must setup a module named
treemanager. Refer documentation for details.
- kartik\tree\TreeView: Widget, allows you to manage the tree in admin mode or normal user mode with actions and toolbar to add, edit, reorder, or delete tree nodes.
- kartik\tree\TreeViewInput: Widget, allows you to use the treeview as a dropdown input either as a single select or multiple selection.
- kartik\tree\models\Tree: Model, the entire tree data structure that uses the Nested set behavior from yii2-nested-sets to manage the tree nodes.
- kartik\tree\models\TreeQuery: Query, the query class as required for the Nested set model.
- kartik\tree\controllers\NodeController: Controller, the controller actions that manages the editing of each node for create, update, delete, or reorder (move).
You can see detailed documentation and TreeView demonstration or TreeViewInput demonstration on usage of the extension.
The preferred way to install this extension is through composer.
Note: Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the
minimum-stability settings for your application's composer.json.
$ php composer.phar require kartik-v/yii2-tree-manager "dev-master"
require section of your
Step 1: Prepare Database ¶
Create your database table to store the tree structure. Copy and modify the
schema/tree.sql file (a MySQL example), to create the table
tbl_tree (or for any table name you need). You can add columns you need to this table, but you cannot skip/drop any of the columns mentioned in the script. You can choose to rename the
icon_type columns if you choose to - but these must be accordingly setup in the module.
Step 2: Setup Model ¶
Create your model for storing the tree structure extending
kartik\tree\models\Tree class. You must provide the table name in the model. Optionally you can add rules, or edit the various methods like
isDisabled etc. to identify allowed flags for nodes.
class Tree extends \kartik\tree\models\Tree
public static function tableName()
Step 3: Setup Module ¶
Configure the module named
treemanager in the modules section of your Yii configuration file.
'modules' => [
'treemanager' => [
'class' => '\kartik\tree\Module',
Step 4: Using TreeView Widget ¶
In your view files, you can now use the tree view directly to manage tree data as shown below:
'query' => Tree::find()->addOrderBy('root, lft'),
'headingOptions' => ['label' => 'Categories'],
'fontAwesome' => false,
'isAdmin' => false,
'displayValue' => 1,
Step 5: Using TreeViewInput Widget ¶
If you wish to use the tree input to select tree items, you can use the TreeViewInput widget as shown below. Normally you would use this as a dropdown with the
asDropdown property set to
asDropdown is set to
false, the treeview input widget will be rendered inline for selection.
'query' => Tree::find()->addOrderBy('root, lft'),
'name' => 'kv-product',
'value' => '1,2,3',
'asDropdown' => true,
'multiple' => true,
'fontAwesome' => true,
'rootOptions' => ['label'=>'<i class="fa fa-tree"></i>', 'class'=>'text-success'],
yii2-tree-manager is released under the BSD 3-Clause License. See the bundled
LICENSE.md for details.