efureev / yii2-bootstraptreeview
Bootstrap Tree View widget wrapper for yii2
Installs: 6
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 22
Type:yii2-extension
Requires
- bower-asset/efureev-bootstrap-treeview: *
- yiisoft/yii2-jui: *
This package is auto-updated.
Last update: 2021-06-29 00:58:17 UTC
README
Installation
The preferred way to install this extension is through composer.
Install
Either run
$ php composer.phar require efureev/yii2-widget-bootstraptreeview "dev-master"
or add
"efureev/yii2-widget-bootstraptreeview": "dev-master"
to the require
section of your composer.json
file.
Simple example
use execut\widget\TreeView; use yii\web\JsExpression; $items = [ [ 'text' => 'Parent 1', 'nodes' => [ [ 'text' => 'Child 1', 'nodes' => [ [ 'text' => 'Grandchild 1' ], [ 'text' => 'Grandchild 2' ] ] ], [ 'text' => 'Child 2', ] ], ], [ 'text' => 'Parent 2', ] ]; $onSelect = new JsExpression(<<<JS function (undefined, item) { console.log(item); } JS ); $groupsContent = TreeView::widget([ 'data' => $data, 'size' => TreeView::SIZE_SMALL, 'clientOptions' => [ 'onNodeSelected' => $onSelect, 'selectedBackColor' => 'rgb(40, 153, 57)', 'borderColor' => '#fff', ], ]);
Pjax navigation example
use yii\widgets\Pjax; use yii\web\JsExpression; use execut\widget\TreeView; Pjax::begin([ 'id' => 'pjax-container', ]); echo \yii::$app->request->get('page'); Pjax::end(); $onSelect = new JsExpression(<<<JS function (undefined, item) { if (item.href !== location.pathname) { $.pjax({ container: '#pjax-container', url: item.href, timeout: null }); } var otherTreeWidgetEl = $('.treeview.small').not($(this)), otherTreeWidget = otherTreeWidgetEl.data('treeview'), selectedEl = otherTreeWidgetEl.find('.node-selected'); if (selectedEl.length) { otherTreeWidget.unselectNode(Number(selectedEl.attr('data-nodeid'))); } } JS ); $items = [ [ 'text' => 'Parent 1', 'def' => 'Description', 'href' => Url::to(['', 'page' => 'parent1']), 'nodes' => [ [ 'text' => 'Child 1', 'href' => Url::to(['', 'page' => 'child1']), 'tags' => [12], 'nodes' => [ [ 'text' => 'Grandchild 1', 'href' => Url::to(['', 'page' => 'grandchild1']) ], [ 'text' => 'Grandchild 2', 'href' => Url::to(['', 'page' => 'grandchild2']) ] ] ], ], ], ]; $onNodeHover = new \yii\web\JsExpression(<<<JS function (undefined, item, tv) { item.def = 'Description'; tv.treeview('redrawNode', item); } JS ); $onNodeLeave= new \yii\web\JsExpression(<<<JS function (undefined, item, tv) { delete item.def; tv.treeview('redrawNode', item); } JS ); echo TreeView::widget([ 'data' => $items, 'size' => TreeView::SIZE_SMALL, 'clientOptions' => [ 'onNodeSelected' => $onSelect, 'showTags' => true, 'showTips' => true, 'onNodeSelected' => $onSelect, 'onNodeHover' => $onNodeHover, 'onNodeLeave' => $onNodeLeave, ], ]);
License
yii2-widget-bootstraptreeview is released under the Apache License Version 2.0. See the bundled LICENSE.md
for details.