Пробую установить виджет wbraganca/yii2-fancytree-widget в целях обучения.
Смысл, чтобы слева была форма меню и при нажатии в ветвях дерева справа в форме 'инфо' все отображалось.
По порядку..
Для этого использую creocoder/yii2-nested-sets wbraganca/yii2-fancytree-widget (выводит js plagin c деревом) но у него дата передаётся в таком иерархическом виде.
Код: Выделить всё
$data = [
['title' => 'Node 1', 'key' => 1],
['title' => 'Folder 2', 'key' => '2', 'folder' => true, 'children' => [
['title' => 'Node 2.1', 'key' => '3'],
['title' => 'Node 2.2', 'key' => '4']
]]
];
В меню контроллер сделан экшен 'tree' и 'move'
MenuControoller
Код: Выделить всё
public function actionTree($id = 1)
{
return $this-> render ('tree', [
'data' => Menu::findOne($id)->tree()
]);
}
public function actionMove ($item,$action,$second)
{
$item_model = Menu::findOne($item);
$second_model = Menu::findOne($second);
switch ($action){
case 'after':
$item_model->insertAfter($second_model);
break;
case 'before':
$item_model->insertBefore($second_model);
break;
case 'over':
$item_model->appendTo($second_model);
break;
}
$item_model->save();
return true;
}
Tree.php
Код: Выделить всё
<?php
use yii\web\JsExpression;
use wbraganca\fancytree\FancytreeWidget;
use wokster\treebehavior\NestedSetsTreeBehavior;
/**
/* @var $this yii\web\View */
/* @var $data array */
$this->title = 'дерево категорий';
?>
<div class "">
<div class = "row">
<div class = "col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class = "box box-primary">
<dib class = "box-header with-border">
<h3 class ="box-title">дерево</h3>
<div class ="box-tools pull-right">
<a href="<?=\yii\helpers\Url::toRoute('/menu/create')?>" class="btn btn-box-tool">
<i class="fa fa-plus-square-o" aria-hidden="true"></i></a>
<button type="button" class="btn btn-box-tool" data-wiget="collapse">
<i class="fa fa-minus"></i></button>
</div>
</div><!--/.box-header -->
<div class="box-body">
<?php
// Example of data.
echo
\wbraganca\fancytree\FancytreeWidget::widget([
'options' =>[
'source' => $data,
'extensions' => ['dnd'],
'dnd' => [
'preventVoidMoves' => true,
'preventRecursiveMoves' => true,
'autoExpandMS' => 400,
'dragStart' => new JsExpression('function(node, data) {
return true;
}'),
'dragEnter' => new JsExpression('function(node, data) {
return true;
}'),
'dragDrop' => new JsExpression('function (node, data) {
$.get("/menu/move",(item: data.otherNode.key.substr(1), action: data.hitMode,
second:node.key.substr(1)},function() {
data.otherNode.moveTo(node, data.hitMode);
});
}'),
],
'activate' => new JsExpression ('function(event,data) {
var title = data.node.title;
var id = data.node.key.substr(1);
$("#cat-info .box-header>h3") .text(title);
$.get("/menu/view-ajax",(id: id),function(data) {
$("#cat-info" .box-body").html (data);
});
}'),
]
]);
?>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="box box-primary" id="cat-info">
<div class="box-header with-border">
<h3 class="box-title">инфо</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-wiget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
</div><!--/.box-header-->
</div class="box-body">
</div>
</div>
</div>
</div>
</div>
?>
Если в таком, то дерево выводится с закомм. 'activate' только.
'Activate' относится к событиям виджета fancytree- т.е. когда кликается
элемент в ветке дерева и справа в форме должно выскакивать форма полностью. Но это не работает.
Вопрос: как подключить эту взаимосвязь?
Код: Выделить всё
echo
\wbraganca\fancytree\FancytreeWidget::widget([
'options' =>[
'source' => $data,
'extensions' => ['dnd'],
'dnd' => [
'preventVoidMoves' => true,
'preventRecursiveMoves' => true,
'autoExpandMS' => 400,
'dragStart' => new JsExpression('function(node, data) {
return true;
}'),
'dragEnter' => new JsExpression('function(node, data) {
return true;
}'),
'dragDrop' => new JsExpression('function(node, data) {
$.get("move",{item: data.otherNode.data["id"], action: data.hitMode,
second: node.data["id"]},function(e ) {
data.otherNode.moveTo(node, data.hitMode);
console.log(e);
});
}'),
],
/* 'activate' => new JsExpression ('function(event,data) {
var title = data.node.title;
var id = data.node.key.substr(1);
$("#cat-info .box-header>h3") .text(title);
$.get("/menu/view-ajax",(id: id),function(data) {
$("#cat-info" .box-body").html (data);
});
}'),*/
]
]);
?>
C 'dragDrop' автор объясняет один нюанс-когда кто-то взял элемент в ветке и потащил,
делается ajax запрос и раньше, когда пользовался расширением у него
'data.otherNode.key' была просто цифра,но потом появилась цифра с нижним
подчёркиванием в ред., поэтому был добавлен substr(1) В его варианте 'activate'
он тоже присутствует. Но все это у меня не работает.
Код: Выделить всё
'dragDrop' => new JsExpression('function (node, data) {
$.get("/menu/move",(item: data.otherNode.key.substr(1),
action: data.hitMode, second:node.key.substr(1)},function() {
data.otherNode.moveTo(node, data.hitMode);
});
}'),