Generar menú tipo árbol con PHP

Generar menú tipo árbol con PHP
En esta oportunidad veremos una librería para PHP que nos permite crear menús tipo árbol (Tree menus) como los del explorador de windows usando PHP. La librería en cuestión es HTML_TreeMenu que forma parte de la conocida librería de componentes de PHP, PEAR.

Entre las características de HTML_TreeMenu podemos encontrar:

->> Podemos generar diferentes tipos de menus: HTML dinamico (DHTML), Estático y ListBox.

->> Permite crear menús compatibles con los principales navegadores de la actualidad.

->> Es posible generar múltiples menús por página.

->> Podemos configurar el estilo para cada nodo del árbol, al igual que el link y los eventos generados al expandir y contraer el nodo.

Veamos un ejemplo para aclarar las ideas:

prueba.php

 "Primer nivel", 
								   'link' => "test.php", 
								   'icon' => $icon, 
								   'expandedIcon' => $expandedIcon, 
								   'expanded' => true), 
								   array('onclick' => "alert('foo'); return false", 
  									   'onexpand' => "alert('Expanded')")
						);
								
//creamos los sub nodos
$node1_1 = &$node1->addItem(new HTML_TreeNode(array('text' => "Segundo nivel", 
										'link' => "test.php", 
										'icon' => $icon, 
										'expandedIcon' => $expandedIcon))
					);
$node1_1_1 = &$node1_1->addItem(new HTML_TreeNode(array('text' => "Tercer nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon)));
$node1_1_1_1 = &$node1_1_1->addItem(new HTML_TreeNode(array('text' => "Cuarto nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon)));
$node1_1_1_1->addItem(new HTML_TreeNode(array('text' => "Quinto nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon, 'cssClass' => 'treeMenuBold')));
	
//agregamos al menu 2 nodos principales
$menu->addItem($node1);
$menu->addItem($node1);
    
// creamos la clase de presentacion
$treeMenu = &new HTML_TreeMenu_DHTML($menu, array('images' => '../imagesAlt', 'defaultClass' 
=> 'treeMenuDefault'));
?>

luego agregamos el siguiente código HTML donde incluimos la librería javascript.

continuación prueba.php

....
....


    
    
    



printMenu()?>

Podemos ver un ejemplo del menu creado en este link DEMO Tree menu

La librería HTML_TreeMenu tiene algunos métodos muy útiles como el createFromStructure(array $params) que acepta un array con una estructura de árbol predefinida, las soportadas son la de Richard Heyes disponible en PHPGuru y la de Wolfram Kriesings disponible en PEAR .

Otro método importante es el createFromXML que permite crear el menu a partir de un string que contiene un formato XML.

Finalmente, HTML_TreeMenu nos provee una clase abstracta HTML_TreeMenu_Presentation la cual podemos extender y crear nuestros propios tipos de menús lo que nos ofrece de una gran libertad para personalizar al máximo nuestros menús.

Como siempre, recomendamos leer la documentación oficial para poder aprovechar totalmente la librería y esperamos que esta introducción les haya sido útil.

Más información:
Documentación oficial

Juan Benitez

Fundador de Tecnopedia.net. Licenciado en Informática, desarrollador Web, Android y PHP. Apasionado de las tecnologías y el fútbol. Reparto mis días programando, creando sitios, apps o escribiendo en @Tecnopedianet... y sí, además tengo esposa y una hija ;)

Ver todas las entradas de Juan Benitez →

2 comentario en “Generar menú tipo árbol con PHP

  1. Hola Juan Carlo, deberías usar los datos devueltos por tu consulta SQL como array de entrada para la clase HTML_TreeNode.
    Ejemplo, supongamos que nuestra consulta devuelve el siguiente array de datos:

    $datos_sql = array ('1'=>'Pajaros', '2'=>'Perros','3'=>'Gatos');
    
    foreach ($datos_sql as $clave=>$valor){
    $nodo = new HTML_TreeNode(array('text' => $valor, 
    		   'link' => "test.php", 
    		   'icon' => $icon, 
    		   'expandedIcon' => $expandedIcon, 
    		   'expanded' => true), 
    		    array('onclick' => "alert('click'); return false", 
      		          'onexpand' => "alert('Expandido')")
    		);
    }
    

    esto genera 3 nodos con los animales de nuestro array de datos.
    Espero que te sirva, saludos.

  2. Hola, muy bueno y didactico el ejemplo.

    Quisiera saber si me puede ayudar en lo siguiente

    Tengo el menu tipo arbol en un div, y quisiera que cuando haga clic el elgun item del arbol se me ejecutara el archivo.php en otro div de la misma pagina. Supongamos <div id="cuerpo"> y asi sucesivamente con todos los items del arbol deberian ejecutar distintos archivos.php siempre en el div identificado como cuerpo.

    Espero se entienda gracias

Los comentarios están cerrados.