New file |
0,0 → 1,319 |
|
<%-- |
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
PARA TESTAR ESTE EXEMPLO INVOQUE O SEGUINTE URL: |
/examples/angular/angularTree.do |
PORQUE ESTA PAGINA USA A INCLUSAO DOS SCRIPTS DA ANGULAR TREE |
QUE ESTAO EM /layout/themes/scripts-default.jsp |
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
--%> |
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %> |
<%@ taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %> |
<%@ taglib prefix="logic" uri="/WEB-INF/tlds/struts-logic.tld" %> |
|
<style> |
.btn { |
margin-right: 8px; |
} |
|
.tree-node,.angular-ui-tree-handle { |
background: #f8faff; |
border: 1px solid #dae2ea; |
color: #7c9eb2; |
padding: 10px 10px; |
} |
|
.ui-tree-node |
{ |
padding: 10px; |
} |
.angular-ui-tree-handle:hover { |
color: #438eb9; |
background: #f4f6f7; |
border-color: #dce2e8; |
} |
|
.angular-ui-tree-placeholder { |
background: #f0f9ff; |
border: 2px dashed #bed2db; |
-webkit-box-sizing: border-box; |
-moz-box-sizing: border-box; |
box-sizing: border-box; |
} |
|
.nodeEmpty { |
height: 50px; |
margin:10px; |
margin-left: 30px; |
border: 1px dashed blue; |
} |
|
.group-title { |
background-color: #687074 !important; |
color: #FFF !important; |
} |
|
|
/* --- Tree --- */ |
.tree-node { |
border: 1px solid #dae2ea; |
background: #f8faff; |
color: #7c9eb2; |
} |
|
.nodrop { |
background-color: #f2dede; |
} |
|
|
.nodrag { |
background-color: #f2eec1; |
} |
|
.tree-node-content { |
margin: 10px; |
} |
|
|
/*Estilo adicionado por mim para os movidos*/ |
.moved |
{ |
border: 2px solid blue !important; |
} |
|
|
|
|
</style> |
<div class="container-fluid"> |
|
<% |
|
//Para ler da base de dados por exemplo |
// AbstractDao.getCurrentSession().beginTransaction(); |
//List<RepositoryDocumentCollection> collections = DaoFactory.getRepositoryDocumentCollectionDaoImpl().findRoots(); |
//String collectionsJson = RepositoryDocumentCollectionImpl.toJson(collections); |
|
//NAO ESTA A SER USADO É APENAS PARA EXEMPLIFICAR |
//O JSON ESTA INCIALIZADO NO SCOPE DO JAVA_SCRIPT |
String collectionsJson =""; |
|
|
request.setAttribute("collectionsJson", collectionsJson); |
|
%> |
|
|
|
|
<div id="treeAppPageContent" ng-app="treeAppPageContent" ng-controller="treeAppPageContentController"> |
|
|
<script> |
|
var treeAppPageContent = angular.module('treeAppPageContent', ['ui.tree']); |
GLOBAL_BacoAngularAppDependencies.push('treeAppPageContent'); |
|
<!-- estes codigos todos do remove e do toggle e etc's não mechi em nada limitei-me a copiar dos gajos--> |
treeAppPageContent.controller('treeAppPageContentController', function ($scope) { |
//PARA USAR O QUE VEM DA BASE DE DADOS |
//$scope.data = ${collectionsJson}; |
|
$scope.data = [ |
{ |
"id" : 1, |
"name" : "Nao deixa fazer drag", |
"nodrag" : true, |
"isDirectory" : true |
|
}, |
{ |
"id" : 2, |
"name" : "Nao deixa fazer drop", |
"nodrop" : true, |
"isDirectory" : true |
}, |
{ |
"id" : 3, |
"name" : "Deixa fazer Tudo", |
"isDirectory" : true |
}, |
{ |
"id" : 4, |
"name" : "Deixa fazer Tudo e ja foi movido", |
"moved" : true, |
"isDirectory" : true |
}, |
{ |
"id" : 5, |
"name" : "Exemplo de folha nao deixa abrir", |
"isDirectory" : false |
} |
]; |
$scope.treeOptions = { |
accept: function(sourceNodeScope, destNodesScope, destIndex) { |
return true; |
}, |
dropped: function(e) { |
console.log (e.source.nodeScope.$modelValue); |
alert ("Largado o nó com nome: " + e.source.nodeScope.$modelValue.name + " sobre " + e.dest.nodesScope.$parent.$modelValue.name); |
e.source.nodeScope.$modelValue.moved = true; |
|
} |
}; |
$scope.remove = function (scope) |
{ |
var nodeData = scope.$modelValue; |
alert("removendo item com id " + nodeData.id) |
scope.remove(); |
}; |
$scope.openedAndHasNotChilds = function(node) |
{ |
if(node.childs == null) |
return false; |
return node.childs.length == 0; |
} |
$scope.newSubItem = function (scope) |
{ |
var nodeData = scope.$modelValue; |
if(nodeData.open != null && nodeData.open == true) |
{ |
|
if(!nodeData.childs) |
{ |
nodeData.childs = []; |
} |
nodeData.childs.push({ |
id: -1, |
title: nodeData.name + '.' + (nodeData.childs.length + 1), |
nodes: [], |
isDirectory: true |
}); |
} |
else |
{ |
alert("Abra primeiro o nó") |
} |
|
}; |
|
$scope.collapseAll = function () { |
$scope.$broadcast('angular-ui-tree:collapse-all'); |
}; |
|
$scope.expandAll = function () { |
$scope.$broadcast('angular-ui-tree:expand-all'); |
}; |
|
$scope.openItem = function(item) |
{ |
//apenas deixa abrir neste caso |
if(item.open && item.open==true) |
{ |
//Desligamos o Close se nao isto é uma trapalhada para os elementos que já perderam filhos |
//e depois iamos abri-los novamente |
//item.open=false; |
//delete item.childs; |
} |
else |
{ |
alert("Abrindo Filhos Exemplo"); |
item.open = true; |
item.childs = []; //linha necessária para deixar fazer drop no <ul> |
|
/* |
Exemplo de chamar um JSON para abrir filhos |
$.getJSON("<%=request.getContextPath()%>/user/pagecontent/jorgeaux/section.jsp",{path:item.path}, |
function(json){ |
item.childs = json; |
item.open = true; |
angular.element($("#treeAppPageContent")).scope().$apply(); |
});*/ |
} |
} |
|
|
} |
); |
|
</script> |
|
<!--TEMPLATE RECURSIVO--> |
<script type="text/ng-template" id="childs_renderer.html"> |
<!--Para nao deixar fazer drag--> |
<div ng-attr-data-nodrag="{{node.nodrag}}" class="tree-node tree-node-content clearfix" ng-class="{nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved}"> |
|
<!--O ATRIBUTO ui-tree-handle DEVE SER COLOCADO ONDE É FEITO O CONTROLO DE ARRASTO DRAG AND DROP |
NORMALMENTE NOS EXEMPLOS DEFAULT ESTÁ NO NÓ INTEIRO MAS SE QUISERMOS OUTROS BOTOES TEMOS DE SEPARAR |
SE NAO NADA FUNCIONA POIS O DRAG SOBREPOEM-SE A TUDO--> |
<div class="col-md-1"> |
<i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i> |
</div> |
<!--O atributo isDirectory apenas deixa abrir ou nao |
data-nodrag significa que não é arrastavel este botão |
as setas são colocadas consoante esteja aberto ou fechado |
--> |
<div class="col-md-1"> |
<a class="btn btn-success btn-xs" ng-if="node.isDirectory" data-nodrag ng-click="openItem(node)"> |
<span |
class="glyphicon" |
ng-class="{ |
'glyphicon-chevron-right': !node.open, |
'glyphicon-chevron-down': node.open |
|
}"> |
</span> |
</a> |
</div> |
|
<div class="col-md-8"> |
<input ng-model="node.name" type="text" class="form-control" data-nodrag> |
<span ng-if="node.nodrop">* No drop</span> <span ng-if="node.nodrag">* No drag</span> |
</div> |
<!--BOTOES DE REMOVE E NEW SUBITEMS CHAMAM FUNCOES DO SCOPE--> |
<div class="col-md-2"> |
<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> |
|
<!-- 1) UMA LISTA PARA O NODROP data-nodrop-enabled="true" 2) (EM BAIXO) OUTRA PARA OS QUE DEIXAM FAZER DROP DROP--> |
<ol ng-if="node.nodrop" ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }"> |
<li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'"> |
</li> |
</ol> |
<!-- 2) LISTA DO DROP--> |
<ol ng-if="!node.nodrop" ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }"> |
<li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'"> |
</li> |
</ol> |
</script> |
|
|
<!-- E finalmente este é o unico codigo dos gajos que metem no HTML puro--> |
<div class="row"> |
|
<div class="col-sm-6"> |
<div ui-tree="treeOptions" id="page-content-root"> |
<ol ui-tree-nodes ng-model="data"> |
<li ng-repeat="node in data" ui-tree-node ng-include="'childs_renderer.html'"></li> |
</ol> |
</div> |
</div> |
|
<div class="col-sm-6"> |
<pre class="code">{{ data | json }}</pre> |
</div> |
</div> |
</div> |
|
|
<%--AbstractDao.getCurrentSession().getTransaction().commit();--%> |
|
</div> |