Связанные деревья в пользовательском интерфейсе
Я использую Я использую: http://angular-ui-tree.github.io/angular-ui-tree/ Я хочу иметь возможность перетаскивать на родительском уровне, но не на дочернем уровне в дерево.
Как бы я пошел об этом. Сейчас я использую их код, который я могу разместить здесь.
HTML
<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer1.html">
<div ui-tree-handle class="tree-node tree-node-content">
<div class="tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{node.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer1.html'">
</li>
</ol>
</script>
<script type="text/ng-template" id="nodes_renderer2.html">
<div class="tree-node">
<div class="pull-left tree-handle" >
<span class="glyphicon glyphicon-list"></span>
</div>
<div class="tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}">
</span>
</a>
{{node.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer2.html'">
</li>
</ol>
</script>
<div class="row">
<div class="col-sm-12">
<h3>Connected Trees</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Tree 1</h3>
<div ui-tree id="tree1-root">
<ol ui-tree-nodes="" ng-model="tree1">
<li ng-repeat="node in tree1" ui-tree-node ng-include="'nodes_renderer1.html'"></li>
</ol>
</div>
</div>
<div class="col-sm-6">
<h3>Tree 2</h3>
<div ui-tree id="tree2-root">
<ol ui-tree-nodes="" ng-model="tree2">
<li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
</ol>
</div>
</div>
</div>
<h3>Data binding</h3>
<div class="row">
<div class="col-sm-6">
<pre class="code">{{ tree1 | json }}</pre>
</div>
<div class="col-sm-6">
<pre class="code">{{ tree2 | json }}</pre>
</div>
</div>
и контроллер
(function () {
'use strict';
angular.module('demoApp')
.controller('ConnectedTreesCtrl', ['$scope', function ($scope) {
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
nodeData.nodes.push({
id: nodeData.id * 10 + nodeData.nodes.length,
title: nodeData.title + '.' + (nodeData.nodes.length + 1),
nodes: []
});
};
$scope.tree1 = [{
'id': 1,
'title': 'tree1 - item1',
'nodes': []
}, {
'id': 2,
'title': 'tree1 - item2',
'nodes': []
}, {
'id': 3,
'title': 'tree1 - item3',
'nodes': []
}, {
'id': 4,
'title': 'tree1 - item4',
'nodes': []
}];
$scope.tree2 = [{
'id': 1,
'title': 'tree2 - item1',
'nodes': []
}, {
'id': 2,
'title': 'tree2 - item2',
'nodes': []
}, {
'id': 3,
'title': 'tree2 - item3',
'nodes': []
}, {
'id': 4,
'title': 'tree2 - item4',
'nodes': []
}];
}]);
}());
Спасибо
** что я пробовал **
Это то что я пробовал
$scope.tree2Options = {
beforeDrop : function (e) {
//console.log("sent from tree 2");
var destValue = e.dest.nodesScope.node ? e.dest.nodesScope.node.value : "pata nehi";
//console.log(destValue);
},
accept: function(sourceNodeScope, destNodesScope, destIndex) {
//console.log("tree 2 before accepting ");
console.log(destNodesScope.$element.attr('data-type'));
return true
}
};
а потом
<div class="col-sm-6">
<h3>Tree 2</h3>
<div data-ui-tree="tree2Options" id="tree2-root">
<ol ui-tree-nodes="" ng-model="tree2" data-type="{{tree2.id}}">
<li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
</ol>
</div>
</div>
но console.log не дает мне никаких идентификаторов или чего-либо еще. Я думал добавить атрибут, а затем проверить его
** хакерское исправление **
так что я сделал это, что-то вроде исправить это, но это очень хакерский... Мне все равно нужно знать, почему я не могу получить идентификаторы и почему это работает... в основном, если я захожу в узел, так как узел [], поэтому он имеет идентификатор неопределен и дает неопределенный, и я проверяю это.. который выполняет свою работу, но я ненавижу это как его так хакерский
accept: function(sourceNodeScope, destNodesScope, destIndex) {
//console.log("tree 2 before accepting ");
console.log(destNodesScope.$element.attr('data-type'));
if(destNodesScope.$element.attr('data-type') != 'undefined'){
//return true
console.log("true");
return true;
}else{
console.log("flase");
return false;
}
}
1 ответ
Ок после определенных проб и ошибок разобрался
это то, что я сделал.. я создаю тип данных, как предложено выше в HTML
<div class="col-sm-6">
<h3>Tree 2</h3>
<div data-ui-tree="tree2Options" id="tree2-root">
<ol ui-tree-nodes="tree2Nodes" ng-model="tree2" >
<li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'" data-type="{{node.allowed}}"></li>
</ol>
</div>
</div>
</div>
И тогда я добавил следующее
accept: function(sourceNodeScope, destNodesScope, destIndex) {
var allowed = false;
angular.forEach(destNodesScope.$element[0].children, function (item) {
var attr_allowed = item.attributes['data-type'] && item.attributes['data-type'].value ? item.attributes['data-type'].value : false;
if(attr_allowed && attr_allowed=="allowed" ){
allowed = true;
}
});
if(allowed){
return true;
}else{
return false;
}
},
работает сейчас
Спасибо