<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>PRUEBA CASA ORGANIGRAMA</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--ORGCHART-->
<link rel="stylesheet" type="text/css" href="css\jquery.orgchart.css">
<!--FONTAWESOME-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css\estilo.css">
<link rel="stylesheet" type="text/css" href="css\second.css">
</head>
<body>
<div id="chart-container">
</div>
<button id="AsignarPA">asignar</button>
</body>
<button id="guardarEstructura">
Guardar
</button>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--ORGCHART-->
<script src = "js\jquery.orgchart.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<!--ESTRUCTURA ORGANIGRAMA-->
<script>
var datasource = {
'id': 3,
'name': 'Jefe de desarrollo'
};
$('#chart-container').orgchart({
'data' : datasource,
'depth': 2,
'nodeContent': 'title',
'nodeID': 'id',
'draggable': true
})
.children('.orgchart').on('nodedropped.orgchart', function(event) {
console.log('draggedNode:' + event.draggedNode.children('.title').text()
+ ', dragZone:' + event.dragZone.children('.title').text()
+ ', dropZone:' + event.dropZone.children('.title').text()
);
});
//generar estructura en codigo
//el resultado generado lo guardo en la base de datos
//para tener un respaldo de la estructura del area
$('#guardarEstructura').on('click', function() {
alert("hola");
if (!$('pre').length) {
var hierarchy = $('#chart-container').orgchart('getHierarchy');
$('#guardarEstructura').after('<pre>').next().append(JSON.stringify(hierarchy, null, 2));
}
});
//CREAR NUEVOS NODOS
$('#AsignarPA').on('click', function() {
var $chartContainer = $('#chart-container');
//AGREGAR POR ULTIMO AL JEFE JEFE
$chartContainer.orgchart('addParent', $chartContainer.find('.node:first'), { 'name': 'jennifer', 'id': 1 });
$chartContainer.orgchart('addParent', $chartContainer.find('.node:first'), { 'name': 'jenniferBA', 'id': 2 });
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ORGANIGRAMA PARA GESTION</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--ORGCHART-->
<link rel="stylesheet" type="text/css" href="css\jquery.orgchart.css">
<!--FONTAWESOME-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css\estilo.css">
<link rel="stylesheet" type="text/css" href="css\second.css">
</head>
<body>
<div id="chart-container">
</div>
</body>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--ORGCHART-->
<script src = "js\jquery.orgchart.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<!--ESTRUCTURA ORGANIGRAMA-->
<script>
//El id puede ser un data-id concatenado asi se puede controlar la foto a mostrar
//traer en un arreglo los ids de todos los colaboradores que pertenezcan a un area especifica
//el contenido de esta variable puede ser el retorno de traer la estructura de la base de datos.
var datasource = {
'id': 1,
'name': 'Jefe de desarrollo',
'children': [
{ 'id': 2, 'name': 'Supervisor Tarjetas'},
{ 'id': 3,'name': 'Supervisor Sistemas',
'children': [
{ 'id': 4,'name': 'Analista de Sistemas' },
{ 'id': 5, 'name': 'Analista Programador'}
]
},
{ 'id': 6,'name': 'Supervisor Surcursal' }
]
};
//Muestra las fotos de cada colaborador
$('#chart-container').orgchart({
'data' : datasource,
'depth': 2,
'nodeContent': 'title',
'nodeID': 'id',
'createNode': function($node, data) {
var secondMenuIcon = $('<i>', {
'class': 'fa fa-info-circle second-menu-icon',
click: function() {
$(this).siblings('.second-menu').toggle();
}
});
var secondMenu = '<div class="second-menu"><img class="avatar" src="img/fer.png" style = "width: 60px; height: 60px;"></div>';
$node.append(secondMenuIcon).append(secondMenu);
}
});
</script>
</html>
<!--draggg-->
<!DOCTYPE html>
<html>
<head>
<title>ORGANIGRAMA PARA ASIGNACION DE PUESTOS A AREA</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--ORGCHART-->
<link rel="stylesheet" type="text/css" href="css\jquery.orgchart.css">
<!--FONTAWESOME-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css\estilo.css">
<link rel="stylesheet" type="text/css" href="css\second.css">
</head>
<body>
<button id="guardarEstructura">
Guardar
</button>
<div id="chart-container">
</div>
</body>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--ORGCHART-->
<script src = "js\jquery.orgchart.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<!--ESTRUCTURA ORGANIGRAMA-->
<script>
var datasource = {
'id': 1,
'name': 'Jefe de desarrollo',
'children': [
{ 'id': 2, 'name': 'Supervisor Tarjetas'},
{ 'id': 3,'name': 'Supervisor Sistemas',
'children': [
{ 'id': 4,'name': 'Analista de Sistemas' },
{ 'id': 5, 'name': 'Analista Programador'}
]
},
{ 'id': 6,'name': 'Supervisor Surcursal' }
]
};
$('#chart-container').orgchart({
'data' : datasource,
'depth': 2,
'nodeContent': 'title',
'nodeID': 'id',
'draggable': true,
'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
return false;
}
return true;
}
})
.children('.orgchart').on('nodedropped.orgchart', function(event) {
console.log('draggedNode:' + event.draggedNode.children('.title').text()
+ ', dragZone:' + event.dragZone.children('.title').text()
+ ', dropZone:' + event.dropZone.children('.title').text()
);
});
//generar estructura en codigo
//el resultado generado lo guardo en la base de datos
//para tener un respaldo de la estructura del area
$('#guardarEstructura').on('click', function() {
alert("hola");
if (!$('pre').length) {
var hierarchy = $('#chart-container').orgchart('getHierarchy');
$('#guardarEstructura').after('<pre>').next().append(JSON.stringify(hierarchy, null, 2));
}
});
</script>
</html>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
}
#chart-container {
position: relative;
display: inline-block;
top: 10px;
left: 10px;
height: 420px;
width: calc(100% - 24px);
border: 2px dashed #aaa;
border-radius: 5px;
overflow: auto;
text-align: center;
}
.home-link {
margin-top: 20px;
margin-right: 20px;
float: right;
}
.home-link a {
font-size: 36px;
color: #d43f3a;
text-decoration: none;
}
.home-link a:hover {
text-shadow: 0 0 6px #d43f3a;
}
.home-link a:hover+i {
animation: jump 0.6s ease infinite;
-webkit-animation: jump 0.6s ease infinite;
}
@keyframes jump {
0% {top: 0px;}
50% {top: -6px;}
100% {top: 6px;}
}
@-webkit-keyframes jump {
0% {top: 0px;}
50% {top: -6px;}
100% {top: 6px;}
}
.home-link i {
position: relative;
font-size: 48px;
color: #fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
/*SECOND*/
.orgchart .second-menu-icon {
transition: opacity .5s;
opacity: 0;
right: -5px;
top: -5px;
z-index: 2;
color: rgba(68, 157, 68, 0.5);
font-size: 18px;
position: absolute;
}
.orgchart .second-menu-icon:hover {
color: #449d44;
}
.orgchart .node:hover .second-menu-icon {
opacity: 1;
}
.orgchart .node .second-menu {
display: none;
position: absolute;
top: 0;
right: -70px;
border-radius: 35px;
box-shadow: 0 0 10px 1px #999;
background-color: #fff;
z-index: 1;
}
.orgchart .node .second-menu .avatar {
width: 60px;
height: 60px;
border-radius: 30px;
float: left;
margin: 5px;
}
