Hola amigos, apenas ayer encontre un organigrama en el cual si hago clic en una persona se esconde los descendientes (Me refiero a los que van abajo de esta persona) pero como mi organigrama es muy grande, de 7 niveles, pues quiero que solo aparezcan los primeros 3 y al hacer clic en una persona del nivel 1 ya se mostraran los de abajo. Esto de ocultar y mostrar ya viene en el organigrama pero cuando abro la pagina donde me muestra el organigrama me salen todos los niveles (7) pero quiero que solo se muestren 3 y si el usuario de sea ver el 4 puede hacer clic en el nivel 3 y se muestran. Les dejo los archivos y a ver si me echan una mano. Gracias.
Este es el Demo del Organigrama:
http://dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html
Estos son los archivos del Organigrama:
https://github.com/Tquila/jOrgChart/tree/master/example
Y esta es la pagina donde se muestra mi organigrama:
Index.php
Código PHP:
<!DOCTYPE html>
<html><?PHP
include_once("connection.php");
$connection = mysql_connect ("$DBServer","$DBUser","$DBPassword");
if (!$connection) {
die('No puede conetarse: ' . mysql_error()); }
mysql_select_db ("$DBName", $connection);
$id = (isset($_GET["id"])) ? $_GET["id"] : exit();
$resultado = mysql_query ("SELECT * FROM asociados WHERE id_asc=$id");
while($linea1 = mysql_fetch_array($resultado)) {
$resultado = mysql_query ("SELECT * FROM asociados WHERE nmb_asc='$linea1[nmb_dsc1]'");
while($lineb1 = mysql_fetch_array($resultado)) {
$resultado = mysql_query ("SELECT * FROM asociados WHERE nmb_asc='$linea1[nmb_dsc2]'");
while($lineb2 = mysql_fetch_array($resultado)) {
$resultado = mysql_query ("SELECT * FROM asociados WHERE nmb_asc='$lineb1[nmb_dsc1]'");
while($linec1 = mysql_fetch_array($resultado)) {
$resultado = mysql_query ("SELECT * FROM asociados WHERE nmb_asc='$lineb1[nmb_dsc2]'");
while($linec2 = mysql_fetch_array($resultado)) {
$resultado = mysql_query ("SELECT * FROM asociados WHERE nmb_asc='$lineb2[nmb_dsc1]'");
while($linec3 = mysql_fetch_array($resultado)) {
$resultado = mysql_query ("SELECT * FROM asociados WHERE nmb_asc='$lineb2[nmb_dsc2]'");
while($linec4 = mysql_fetch_array($resultado)) {
?>
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Organigrama</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/header.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/form.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="prettify.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.jOrgChart.js"></script>
<script>
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart'
});
/* Extra Code */
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
});
</script>
</head>
<body onLoad="prettyPrint();">
<ul>
<pre class="prettyprint lang-html" id="list-html" style="display:none"><ul id="org" style="display:none">
<li><div class="organi"><?PHP echo $linea1['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $lineb1['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linec1['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $lined1['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linee1['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef1['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef2['nmb_asc']; ?></div></li>
</ul>
</li>
<li><div class="organi"><?PHP echo $linee2['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef3['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef4['nmb_asc']; ?></div></li>
</ul>
</li>
</ul>
</li>
<li><div class="organi"><?PHP echo $lined2['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linee3['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef5['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef6['nmb_asc']; ?></div></li>
</ul>
</li>
<li><div class="organi"><?PHP echo $linee4['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef7['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef8['nmb_asc']; ?></div></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><div class="organi"><?PHP echo $linec2['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $lined3['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linee5['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef9['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef10['nmb_asc']; ?></div></li>
</ul>
</li>
<li><div class="organi"><?PHP echo $linee6['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef11['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef12['nmb_asc']; ?></div></li>
</ul>
</li>
</ul>
</li>
<li><div class="organi"><?PHP echo $lined4['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linee7['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef13['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef14['nmb_asc']; ?></div></li>
</ul>
</li>
<li><div class="organi"><?PHP echo $linee8['nmb_asc']; ?></div>
<ul>
<li><div class="organi"><?PHP echo $linef15['nmb_asc']; ?></div></li>
<li><div class="organi"><?PHP echo $linef16['nmb_asc']; ?></div></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</pre>
</div>
</div>
</div>
</div>
<div id="chart" class="orgChart"></div>
<?PHP }}}}}}
} mysql_close($connection); ?>
</body></html>
http://i48.tinypic.com/1orin5.png