entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Menú responsive dinámico recursivo

Hola a todos que tengan buen dia, estoy haciendo un menú recursivo,las funciones que utilizó para obtener los valores de las tablas me funcionan bien pero a la hora de darle diseño me esta fallando, no se si alguien me podría aconsejar sobre como corregir mis funciones
<?php

Función para obtener todos los padres principales

            function obtener_padres(){
                #Declaramos una variable la cual retornara como string
                $html="";
                #Conexión a la base de datos
                $mysqli = new mysqli("localhost","root","","sigep");        
                #Consulta para obtener los padres que en la tabla de relacion su valor sea nulo
                $sql="select main.id_unico,main.nombre from gs_menu main left join gs_menu_aso maso on maso.menuhijo=main.id_unico where maso.id_unico is null";
                $result=$mysqli->query($sql);
                #obtenemos los valores devueltos por la consulta                    
                while ($row= mysqli_fetch_row($result)){
                    #Armado de html dinamico
                    $html.= '<li id="'.str_replace(' ', '', $row[1]).'"><a class="btn">'.$row[1].'</a>';
                    $html.= obtener_hijos($row[0]);
                    $html.= '</li>';
                }
                #Retorna un html
                return $html;
            }

            function obtener_hijos($padre){
                #Declaramos una variable la cual retornara como string
                $html="";
                #Conexión a la base de datos
                $mysqli = new mysqli("localhost","root","","sigep");        
                #Consulta para obtener los hijos
                $sql="select main.id_unico,main.nombre from gs_menu main left join gs_menu_aso maso on maso.menuhijo=main.id_unico where maso.menupadre=$padre";
                $result=$mysqli->query($sql);                    
                #obtenemos los datos devueltos                    
                while ($row= mysqli_fetch_row($result)){
                    #Armado de html dinamico
                    $html.= '<ul>';
                    $html.= "<li>$row[1]";
                    $html.= obtener_hijos($row[0]);
                    $html.= '</li>';
                    $html.= '</ul>';
                }  
                #Retorna html
                return $html;
            }
            ?>

            <nav id="main" class="collapse navbar-collapse">

                <ul role="navigation">
                    <?php 
                    #Impresión de la función para obtener los padres
                    echo obtener_padres(); 
                    ?>

                </ul>

            </nav>

los datos los obtengo de dos tablas la primera se llama gs_menu en la que inserto solo el nombre Tabla gs_menu
y la tabla gs_menu_asociado la cual es la tabla en que relaciono los menus padre con los menus hijosgs_menu_aso
, y tambien pido ayuda para implementar un diseño responsivo como menú ya que he estado fallado constantemente en la inclusión, gracias por su atención

1voto

Leonardo-Tadei comentado

Hay sólo 1 nivel de hijos en el menú? O los hijos a su vez son padres de otros elementos del menú?

0voto

Alex_Numpaque comentado

Los hijos a su vez son padres, puede haber una n cantidad de hijos que sean padres

2 Respuestas

2votos

Alex_Numpaque Puntos17150

Hola a todos ya encontre una forma de solucionar el diseño y le incluí la librería tree la cual en el proyecto le modifico los estilos para que funcione junto con bootstrap y me funciona de manera responsive, gracias @Leonardo-Tadei por tu respuesta fue de ayuda

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">    
    <link rel="stylesheet" href="assets/plugins/jstree/src/themes/default/style.css">
</head>
<body data-page="tree">   
<?php 
                #Función para obtener todos los padres principales
                function obtener_padres(){
                    #Declaramos una variable la cual retornara como string
                    $html="";
                    #Conexión a la base de datos
                    $mysqli = new mysqli("localhost","root","","sigep");                            
                    #Consulta para obtener los padres que en la tabla de relación su valor sea nulo
                    $sql="select main.id_unico,main.nombre from gs_menu main left join gs_menu_aso maso on maso.menuhijo=main.id_unico where maso.id_unico is null";
                    $result=$mysqli->query($sql);
                    #obtenemos los valores devueltos por la consulta                    
                    while ($row= mysql_fetch_row($result)){
                        #Armado de html dinamico                        
                        $html.= '<li><a href="#"   style="font-size:12px;cursor:pointer;">'.$row[1].'</a>';
                        if(!empty(obtener_hijos($row[0]))){
                            $html.= '<ul>';
                            $html.= obtener_hijos($row[0]);  
                            $html.= '</ul></li>';
                        }                                                
                    }
                    #Retorna un html
                    return $html;
                }

                function obtener_hijos($padre){
                    #Declaramos una variable la cual retornara como string
                    $html="";
                    #Conexión a la base de datos
                    $mysqli = new mysqli("localhost","root","","sigep");                            
                    #Consulta para obtener los hijos
                    $sql="select main.id_unico,main.nombre,papa.nombre from gs_menu main left join gs_menu_aso maso on maso.menuhijo=main.id_unico left join gs_menu papa on maso.menupadre=papa.id_unico where maso.menupadre=$padre order by main.nombre asc";
                    $result=$mysqli->query($sql);                             
                    #obtenemos los datos devueltos                                        
                    while ($row= mysqli_fetch_row($result)){                         
                        #Armado de html dinamico                                                                                                
                        #Validamos que los valores retornados por la función no sean vacios 
                        #de esta forma obtenemos los hijos que son padres                        
                        if(empty(obtener_hijos($row[0]))){                            
                            $html.= '<li><span style="font-size:12px">'.$row[1].'</span>';
                        }else{                            
                            $html.= '<li><span>'.$row[1].'</span>';
                            $html.= '<ul class="collapse" id="'.str_replace(' ', '',$row[1]).'">';
                            $html.=  obtener_hijos($row[0]);
                            $html.= '</ul>';
                            $html.= '</li>';
                        }                                                                                                                                                                        
                    }                      
                    #Retorna html
                    return $html;
                }
                ?>

                <div id="tree">                     
                    <ul>
                        <?php 
                        #Impresión de la función para obtener los padres
                        echo obtener_padres(); 
                        ?>                         
                    </ul>
                </div>            
    <script src="assets/plugins/jquery-1.11.js"></script>             
    <script src="assets/plugins/jstree/jstree.js"></script>
    <script src="assets/plugins/jstree/jstree.types.js"></script>
    <script src="assets/plugins/jstree/jstree.dnd.js"></script>
    <script>
        $('#tree').jstree();
    </script>    
</body>
</html>

2votos

Leonardo-Tadei Puntos227320

Hola @Jhon_Numpaque,

Si los hijos a su vez pueden ser padres de otros elementos, tu menú desplegable tendrá varios niveles de anidamiento posible:

Padre
|_ nivel 1
|_ nivel 2
  |_ nivel 2.1
  |_ nivel 2.2
    |_ nivel 2.2.1
    |_ nivel 2.2.2
      |_ nivel 2.2.2.1
  |_ nivel 2.3
|_ nivel 3

Pero esta jerarquía no está soportada por Boostrap.

El soporte nativo es para que una opción tenga 1 nivel de opciones anidadas.

Con una extensión del propio Bootstrap, se pueden tener 2 niveles de anidamiento.

Encontré que alguien escribió para llegar a 3 niveles de anidamiento de desplegables.

Pero no hay para anidamientos recursivos sin límite, que es lo que tu estructura de datos permite...

En casa enlace tenés el código y las clases que hay que generar para que funcione. Es posible que debas de adaptar tu función obtener_hijos() para que, según el nivel de profundidad del árbol, genere diferente HTML, pero en cualquier caso parece que por esa vía estás limitado a 3 niveles, con lo que tendrías que agregar a tu código un control de profundidad para impedir que se creen niveles más allá de esto.

Saludos cordiales!

PD: por qué no agregaste a la tabla gs_menu una columna más con el Padre de cada elemento? Te permite el mismo tipo de consultas y hay una tabla menos que mantener (además de que la normalización no justifica esta 2da tabla). La única diferencia sería que las raíces del árbol tendrían padre NULL asignado, pero es tu asunción al hacer el JOIN, así que la proyección te quedaría igual.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta