Class kartik\tree\TreeView
Inheritance | kartik\tree\TreeView » kartik\base\Widget » yii\base\Widget |
---|---|
Uses Traits | kartik\base\TranslationTrait, kartik\base\WidgetTrait |
Subclasses | kartik\tree\TreeViewInput |
Available since version | 1.0 |
An enhanced tree view widget for Yii Framework 2 that allows management and manipulation of hierarchical data using nested sets.
Public Properties
Property | Type | Description | Defined By |
---|---|---|---|
$alertFadeDuration | int | Animation duration (ms) for fading in and out alerts that are displayed during manipulation of nodes. | kartik\tree\TreeView |
$allowNewRoots | bool | Allow new root creation. | kartik\tree\TreeView |
$buttonGroupOptions | array | The HTML attributes for the button groups within the toolbar. | kartik\tree\TreeView |
$buttonIconOptions | string | The default HTML attributes for the toolbar button icons | kartik\tree\TreeView |
$buttonOptions | string | The default HTML attributes for the toolbar buttons | kartik\tree\TreeView |
$cacheSettings | array | Cache settings for displaying the detail form content for each tree node via ajax. | kartik\tree\TreeView |
$checkedNodeOptions | string | The HTML attributes for the indicator which will represent a checked checkbox. | kartik\tree\TreeView |
$childNodeIconOptions | array | The HTML attributes for the child node icon. | kartik\tree\TreeView |
$clientMessages | array | The configuration of various client alert messages | kartik\tree\TreeView |
$collapseNodeOptions | string | The HTML attributes for the indicator for collapsing a node. | kartik\tree\TreeView |
$defaultChildNodeIcon | string | The icon markup for the child node if no icon was setup in the database. | kartik\tree\TreeView |
$defaultParentNodeIcon | string | The icon markup for the collapsed parent node if no icon was setup in the database. | kartik\tree\TreeView |
$defaultParentNodeOpenIcon | string | The icon markup for the opened parent node if no icon was setup in the database. | kartik\tree\TreeView |
$detailOptions | array | The HTML attributes for the detail form container which will display the details of the selected node | kartik\tree\TreeView |
$displayValue | int | The initial value (key) to be selected in the tree and displayed in the detail form. | kartik\tree\TreeView |
$emptyNodeMsg | string | Message shown on tree initialization when either the entire
tree is empty or no node is found for the selected displayValue . |
kartik\tree\TreeView |
$emptyNodeMsgOptions | array | HTML attributes for the empty node message displayed. | kartik\tree\TreeView |
$expandNodeOptions | string | The HTML attributes for the indicator for expanding a node. | kartik\tree\TreeView |
$fontAwesome | bool | Whether to use font awesome icons. | kartik\tree\TreeView |
$footerOptions | array | The HTML attributes for the tree footer container. | kartik\tree\TreeView |
$footerTemplate | string | The template for rendering the footer | kartik\tree\TreeView |
$headerOptions | array | The HTML attributes for the tree header container | kartik\tree\TreeView |
$headerTemplate | string | The template for rendering the header | kartik\tree\TreeView |
$headingOptions | string | The HTML attributes for the heading. | kartik\tree\TreeView |
$i18n | array | The the internalization configuration for this widget | kartik\base\Widget |
$iconEditSettings | array | Settings to edit the icon. | kartik\tree\TreeView |
$isAdmin | bool | Whether the tree is to be allowed for editing in admin mode. | kartik\tree\TreeView |
$mainTemplate | \kartik\tree\the | Main template for rendering the tree view navigation widget and the node detail view form. | kartik\tree\TreeView |
$multiple | bool | Whether to allow multiple selection of checkboxes. | kartik\tree\TreeView |
$nodeActions | array | The actions for managing, deleting, and moving the tree nodes. | kartik\tree\TreeView |
$nodeAddlViews | array | The list of additional view files that will be used
to append content at various sections in the nodeView form. |
kartik\tree\TreeView |
$nodeCheckboxOptions | array | The HTML attributes for the node checkbox indicator for all items in the tree | kartik\tree\TreeView |
$nodeFormOptions | array | The HTML attributes for the node detail form. | kartik\tree\TreeView |
$nodeToggleOptions | array | The HTML attributes for the node toggle indicator for each parent item in the tree | kartik\tree\TreeView |
$nodeView | string | The view file that will render the form for editing the node. | kartik\tree\TreeView |
$options | array | The HTML attributes for the input that will store the selected nodes for the widget | kartik\tree\TreeView |
$parentNodeIconOptions | array | The HTML attributes for the parent node icon. | kartik\tree\TreeView |
$pluginEvents | array | Widget JQuery events. | kartik\base\Widget |
$pluginOptions | array | Widget plugin options | kartik\base\Widget |
$query | \yii\db\ActiveQuery | The query that will be used as the data source for the TreeView. | kartik\tree\TreeView |
$rootNodeCheckboxOptions | array | The HTML attributes for the root node's checkbox indicator | kartik\tree\TreeView |
$rootNodeToggleOptions | array | The HTML attributes for the root node's toggle indicator | kartik\tree\TreeView |
$rootOptions | array | The HTML attributes for the topmost root node container. | kartik\tree\TreeView |
$searchClearOptions | string | The HTML attributes for the search clear indicator | kartik\tree\TreeView |
$searchContainerOptions | string | The HTML attributes for the search container | kartik\tree\TreeView |
$searchOptions | string | The HTML attributes for the search input | kartik\tree\TreeView |
$showCheckbox | bool | Whether to show a checkbox before each tree node label to allow multiple node selection. | kartik\tree\TreeView |
$showFormButtons | bool | Whether to show the form action buttons in the node details form/view. | kartik\tree\TreeView |
$showIDAttribute | bool | Whether to show the key attribute (ID) in the node details form/view. | kartik\tree\TreeView |
$showInactive | bool | Whether to show inactive nodes | kartik\tree\TreeView |
$showTooltips | bool | Show toolbar button tooltips (using bootstrap tooltip plugin) | kartik\tree\TreeView |
$softDelete | bool | Whether the record will be soft deleted, when remove button is clicked. | kartik\tree\TreeView |
$toolbar | array | The settings for the tree management toolbar | kartik\tree\TreeView |
$toolbarOptions | array | The HTML attributes for the toolbar. | kartik\tree\TreeView |
$treeOptions | array | The HTML attributes for the tree selector container | kartik\tree\TreeView |
$treeWrapperOptions | string | The HTML attributes for the wrapper container for the tree header, body, and footer. | kartik\tree\TreeView |
$uncheckedNodeOptions | string | The HTML attributes for the indicator which will represent an unchecked checkbox. | kartik\tree\TreeView |
$value | string | The comma separated initial value (keys) to be checked and selected in the tree | kartik\tree\TreeView |
$wrapperTemplate | \kartik\tree\the | Wrapper template for rendering the tree view navigation widget | kartik\tree\TreeView |
Protected Properties
Property | Type | Description | Defined By |
---|---|---|---|
$_dataVar | string | The element's HTML5 data variable name storing the pluginOptions | kartik\base\Widget |
$_encOptions | string | The Json encoded options | kartik\base\Widget |
$_hashVar | string | The hashed global variable name storing the pluginOptions | kartik\base\Widget |
$_iconPrefix | string | The icon prefix | kartik\tree\TreeView |
$_iconsList | mixed | The icons list | kartik\tree\TreeView |
$_module | kartik\tree\Module | The tree management module. | kartik\tree\TreeView |
$_msgCat | string | Translation message file category name for i18n | kartik\base\Widget |
$_nodes | array | The queried tree nodes | kartik\tree\TreeView |
$_pluginName | string | The name of the jQuery plugin | kartik\base\Widget |
Public Methods
Method | Description | Defined By |
---|---|---|
begin() | kartik\tree\TreeView | |
getConfig() | Generates the configuration for the widget based on module level defaults | kartik\tree\TreeView |
init() | kartik\tree\TreeView | |
initI18N() | Yii i18n messages configuration for generating translations | kartik\base\TranslationTrait |
initOptions() | Initialize all options & settings for the widget | kartik\tree\TreeView |
module() | Returns the tree view module | kartik\tree\TreeView |
registerAssets() | Registers the client assets for the widget | kartik\tree\TreeView |
renderDetail() | Renders the markup for the detail form to edit/view the selected tree node | kartik\tree\TreeView |
renderFooter() | Renders the markup for the tree footer container | kartik\tree\TreeView |
renderHeader() | Renders the markup for the tree header container | kartik\tree\TreeView |
renderHeading() | Renders the markup for the tree heading | kartik\tree\TreeView |
renderRoot() | Renders the root markup for the tree | kartik\tree\TreeView |
renderSearch() | Renders the markup for the search input | kartik\tree\TreeView |
renderToolbar() | Renders the markup for the button actions toolbar | kartik\tree\TreeView |
renderTree() | Renders the markup for the tree hierarchy - uses a fast non-recursive mode of tree traversal. | kartik\tree\TreeView |
renderWidget() | Renders the widget markup | kartik\tree\TreeView |
renderWrapper() | Renders the tree wrapper container | kartik\tree\TreeView |
run() | kartik\tree\TreeView | |
widget() | kartik\tree\TreeView |
Protected Methods
Method | Description | Defined By |
---|---|---|
addAsset() | Adds an asset to the view | kartik\base\WidgetTrait |
getCheckboxIcon() | Gets the checkbox icon based on fontAwesome setting | kartik\tree\TreeView |
getIconsList() | Renders the markup for the detail form to edit/view the selected tree node | kartik\tree\TreeView |
getNodeIcon() | Gets the default node icon markup | kartik\tree\TreeView |
getPluginScript() | Returns the plugin registration script | kartik\base\WidgetTrait |
getToggleIcon() | Gets the default toggle icon based on fontAwesome setting | kartik\tree\TreeView |
hashPluginOptions() | Generates a hashed variable to store the pluginOptions. The following special data attributes will also be setup for the input widget, that can be accessed through javascript : - 'data-krajee-{name}' will store the hashed variable storing the plugin options. The {name} tag will represent the plugin name (e.g. select2, typeahead etc.) - Fixes issue #6. | kartik\base\WidgetTrait |
initSelectedNode() | Initializes the selected node | kartik\tree\TreeView |
registerPlugin() | Registers a specific plugin and the related events | kartik\base\WidgetTrait |
registerPluginOptions() | Registers plugin options by storing it in a hashed javascript variable | kartik\base\WidgetTrait |
renderCheckboxIcon() | Renders the checkbox icon markup based on fontAwesome setting | kartik\tree\TreeView |
renderCheckboxIconContainer() | Renders the checkbox icon container | kartik\tree\TreeView |
renderIcon() | Renders a generic icon using icon suffix | kartik\tree\TreeView |
renderNodeIcon() | Render the default node icon markup | kartik\tree\TreeView |
renderToggleIcon() | Renders the default toggle icon markup based on fontAwesome setting | kartik\tree\TreeView |
renderToggleIconContainer() | Renders the toggle icon container | kartik\tree\TreeView |
setDataVar() | Sets HTML5 data variable | kartik\base\WidgetTrait |
usesTrait() | Check if the trait is used by a specific class or recursively by any of the parent classes or parent traits | kartik\tree\TreeView |
validateSourceData() | Validation of source query data | kartik\tree\TreeView |
Constants
Constant | Value | Description | Defined By |
---|---|---|---|
BTN_CREATE | 'create' | kartik\tree\TreeView | |
BTN_CREATE_ROOT | 'create-root' | Toolbar buttons | kartik\tree\TreeView |
BTN_MOVE_DOWN | 'move-down' | kartik\tree\TreeView | |
BTN_MOVE_LEFT | 'move-left' | kartik\tree\TreeView | |
BTN_MOVE_RIGHT | 'move-right' | kartik\tree\TreeView | |
BTN_MOVE_UP | 'move-up' | kartik\tree\TreeView | |
BTN_REFRESH | 'refresh' | kartik\tree\TreeView | |
BTN_REMOVE | 'remove' | kartik\tree\TreeView | |
BTN_SEPARATOR | 'separator' | kartik\tree\TreeView | |
ICON_CSS | 1 | The icon types for each node stored in database | kartik\tree\TreeView |
ICON_RAW | 2 | kartik\tree\TreeView | |
MOVE_DOWN | 'd' | kartik\tree\TreeView | |
MOVE_LEFT | 'l' | kartik\tree\TreeView | |
MOVE_RIGHT | 'r' | kartik\tree\TreeView | |
MOVE_UP | 'u' | The node reorder/movable directions | kartik\tree\TreeView |
Property Details
The icon prefix
The icons list
The tree management module.
The queried tree nodes
Animation duration (ms) for fading in and out alerts that are displayed during manipulation of nodes.
Allow new root creation.
The HTML attributes for the button groups within the toolbar.
The default HTML attributes for the toolbar button icons
The default HTML attributes for the toolbar buttons
Cache settings for displaying the detail form content
for each tree node via ajax. The following options are supported:
enableCache
: bool, defaults to true.
cacheTimeout
: int, the cache timeout in milliseconds. Defaults to
300000 (or 5 minutes).
flags). Defaults to false
.
The HTML attributes for the indicator which will represent a checked checkbox. The following special options are recognized:
- 'label': string, the label for the indicator. If not set will default to:
<span class="fa fa-check-square-o"></span>
iffontAwesome
is true<span class="glyphicon glyphicon-checked"></span>
iffontAwesome
is false
The HTML attributes for the child node icon.
The configuration of various client alert messages
The HTML attributes for the indicator for collapsing a node.
- 'label': string, the label for the indicator. If not set will default to:
<span class="fa fa-minus-square-o"></span>
iffontAwesome
is true<span class="glyphicon glyphicon-collapse-down"></span>
iffontAwesome
is false
The icon markup for the child node if no icon was setup in the database.
The icon markup for the collapsed parent node if no icon was setup in the database.
The icon markup for the opened parent node if no icon was setup in the database.
The HTML attributes for the detail form container which will display the details of the selected node
The initial value (key) to be selected in the tree and displayed in the detail form. Defaults to 1.
Message shown on tree initialization when either the entire
tree is empty or no node is found for the selected displayValue
.
HTML attributes for the empty node message displayed.
The HTML attributes for the indicator for expanding a node. The following special options are recognized:
- 'label': string, the label for the indicator. If not set will default to:
<span class="fa fa-plus-square-o"></span>
iffontAwesome
is true<span class="glyphicon glyphicon-expand"></span>
iffontAwesome
is false
Whether to use font awesome icons. Defaults to false
.
The HTML attributes for the tree footer container.
The template for rendering the footer
The HTML attributes for the tree header container
The template for rendering the header
The HTML attributes for the heading. The following additional
option is recognized:
label
: the label to display for the heading
Settings to edit the icon. The following settings are recognized:
- show: string, whether to display the icons selection as a list. If set to 'text', the icon will be shown as a plain text input along with icon type. If set to 'list', a list will be shown. If set to 'none', then no icon settings will be shown for editing.
- type: string, the iconTypeAttribute value, defaults to TreeView::ICON_CSS. Should be one of TreeView::ICON_CSS or TreeView::ICON_RAW.
listData: array, the configuration of the icon list data to be shown for selection. This is mandatory if you set
show
to 'list'. You must set the data as$key => $value
format. The list will be parsed to display the icon list and will depend on thetype
.- If type = TreeView::ICON_CSS:
$key
will be the icon suffix name and$value
will be the description for the icon. The icon markup will be automatically parsed then based on whether its a glyphicon or font-awesome whenfontAwesome
property istrue
. For example[ 'folder-close' => 'Folder', 'file' => 'File', 'tag' => 'Tag' ]
- If type = TreeView::ICON_RAW:
$key
is the icon markup to be stored and$value
is the output markup to be displayed as a selection in the list. For example:[ '<img src="images/folder.jpg">' => 'Folder', '<img src="images/file.jpg">' => 'File', '<img src="images/tag.jpg">' => 'Tag', ]
- If type = TreeView::ICON_CSS:
Whether the tree is to be allowed for editing in admin mode.
This will display all nodes and will allow to modify internal tree node
flags. Defaults to false
.
Main template for rendering the tree view navigation widget and the node detail view form.
Whether to allow multiple selection of checkboxes. Defaults to true
.
If set to false
will not show a checkbox and allow only single selection of
tree nodes.
The actions for managing, deleting, and moving the tree nodes. The keys must be one of 'manage', 'save', 'remove', and 'move'. Defaults to:
[
'save' => Url::to(['/treemanager/node/save']),
'manage' => Url::to(['/treemanager/node/manage']),
'remove' => Url::to(['/treemanager/node/remove']),
'move' => Url::to(['/treemanager/node/move']),
]
The list of additional view files that will be used
to append content at various sections in the nodeView
form.
The HTML attributes for the node checkbox indicator for all items in the tree
The HTML attributes for the node detail form.
The HTML attributes for the node toggle indicator for each parent item in the tree
The view file that will render the form for editing the node.
The HTML attributes for the input that will store the selected nodes for the widget
The HTML attributes for the parent node icon.
The query that will be used
as the data source for the TreeView. For example:
Tree::find()->addOrderBy('root, lft')
The HTML attributes for the root node's checkbox indicator
The HTML attributes for the root node's toggle indicator
The HTML attributes for the topmost root node container. The following special options are recognized:
- label: string, the label for the topmost root node (this is not HTML encoded). Defaults to 'Root'. Set this to empty to not display a label.
The HTML attributes for the search clear indicator
The HTML attributes for the search container
The HTML attributes for the search input
Whether to show a checkbox before each tree node label to allow multiple node selection.
Whether to show the form action buttons in the node details form/view.
Whether to show the key attribute (ID) in the node details form/view.
Whether to show inactive nodes
Show toolbar button tooltips (using bootstrap tooltip plugin)
Whether the record will be soft deleted, when remove button
is clicked. Defaults to true
. The following actions are possible:
- If
true
, this will just set theactive
property of node tofalse
. - If
false
, it will attempt to hard delete the whole record.
The settings for the tree management toolbar
The HTML attributes for the toolbar.
The HTML attributes for the tree selector container
The HTML attributes for the wrapper container for the tree header, body, and footer.
The HTML attributes for the indicator which will represent an unchecked checkbox. The following special options are recognized:
- 'label': string, the label for the indicator. If not set will default to:
<span class="fa fa-square-o"></span>
iffontAwesome
is true<span class="glyphicon glyphicon-unchecked"></span>
iffontAwesome
is false
The comma separated initial value (keys) to be checked and selected in the tree
Wrapper template for rendering the tree view navigation widget
Method Details
public static void begin ( $config = [] ) | ||
$config |
Gets the checkbox icon based on fontAwesome setting
protected string getCheckboxIcon ( $checked = false ) | ||
$checked | bool | Whether 'checked' |
Generates the configuration for the widget based on module level defaults
public static array getConfig ( $config = [] ) | ||
$config | array | The widget configuration |
throws | \yii\base\InvalidConfigException |
---|
Renders the markup for the detail form to edit/view the selected tree node
protected string getIconsList ( ) |
Gets the default node icon markup
protected string getNodeIcon ( $type ) | ||
$type | int | 1 = child, 2 = parent, 3 = parent open |
Gets the default toggle icon based on fontAwesome setting
protected string getToggleIcon ( $action = 'collapse' ) | ||
$action | string | Whether 'collapse' or 'expand' |
public void init ( ) |
Initialize all options & settings for the widget
public void initOptions ( ) |
Initializes the selected node
protected void initSelectedNode ( ) |
Returns the tree view module
public static kartik\tree\Module module ( ) |
Registers the client assets for the widget
public void registerAssets ( ) |
Renders the checkbox icon markup based on fontAwesome setting
protected string renderCheckboxIcon ( $checked = false ) | ||
$checked | bool | Whether 'checked' |
Renders the checkbox icon container
protected string renderCheckboxIconContainer ( $root = false ) | ||
$root |
Renders the markup for the detail form to edit/view the selected tree node
public string renderDetail ( ) |
Renders the markup for the tree footer container
public string renderFooter ( ) |
Renders the markup for the tree header container
public string renderHeader ( ) |
Renders the markup for the tree heading
public string renderHeading ( ) |
Renders a generic icon using icon suffix
protected string renderIcon ( $icon, $options = [] ) | ||
$icon | string | The icon suffix name |
$options | array | The HTML attributes for the icon container |
Render the default node icon markup
protected string renderNodeIcon ( $icon, $iconType, $child = true ) | ||
$icon | string | The current node's icon |
$iconType | int | The current node's icon type, must be one of:
|
$child |
Renders the root markup for the tree
public string renderRoot ( ) |
Renders the markup for the search input
public string renderSearch ( ) |
Renders the default toggle icon markup based on fontAwesome setting
protected string renderToggleIcon ( $action = 'collapse' ) | ||
$action | string | Whether 'collapse' or 'expand' |
Renders the toggle icon container
protected string renderToggleIconContainer ( $root = false ) | ||
$root |
Renders the markup for the button actions toolbar
public string renderToolbar ( ) |
Renders the markup for the tree hierarchy - uses a fast non-recursive mode of tree traversal.
public string renderTree ( ) |
Renders the widget markup
public string renderWidget ( ) |
Renders the tree wrapper container
public string renderWrapper ( ) |
public void run ( ) |
Check if the trait is used by a specific class or recursively by any of the parent classes or parent traits
protected static bool usesTrait ( $class, $trait, $autoload = false ) | ||
$class | string | The class name to check |
$trait | string | The trait class name |
$autoload | bool | Whether to autoload the class |
return | bool | Whether the class has used the trait |
---|
Validation of source query data
protected void validateSourceData ( ) | ||
throws | \yii\base\InvalidConfigException |
---|
public static void widget ( $config = [] ) | ||
$config |