Foros del Web » Programando para Internet » Javascript »

Esconder niveles de un Organigrama

Estas en el tema de Esconder niveles de un Organigrama en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/01/2013, 15:51
 
Fecha de Ingreso: enero-2013
Mensajes: 18
Antigüedad: 11 años, 3 meses
Puntos: 5
Esconder niveles de un Organigrama

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

Etiquetas: ajax, esconder, html, jquery, js, niveles, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:03.