El árbol PHP con PEAR: código completo

  • Por
Ahora mostramos el código completo del ejemplo de creación de una interfaz de árbol dinámica.
En el Manual de Interfaz de árbol dinámico en PHP venimos explicando los pasos para la creación de un árbol de contenidos DHTML, que responde a las acciones del usuario para expandir y contraer sus ramas.

En el primer artículo explicamos las generalidades de esta propuesta del framework PHP PEAR para la creación de la interfaz de árbol . Por su parte, en el segundo artículo mostramos paso por paso el procedimiento para la creación del árbol utilizando este paquete de PEAR.

Ahora veremos el código completo de una página PHP, con la que hemos construido el árbol que hemos utilizado de ejemplo de uso de la librería. Antes de continuar, os sugiero ver el ejemplo en marcha en una página aparte, para que luego se pueda entender mejor el código.

<?php
error_reporting(0);

require_once('TreeMenu.php');

$icon = 'folder.gif';
$expandedIcon = 'folder-expanded.gif';

$menu = new HTML_TreeMenu();

$nodo1 = new HTML_TreeNode(array('text'=>'Directorio','link'=>'http://www.desarrolloweb.com/directorio', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$menu->addItem($nodo1);

$nodo1_1 = new HTML_TreeNode(array('text'=>'Programación','link'=>'http://www.desarrolloweb.com/directorio/programacion', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('ontoggle'=>'alert("Has cambiado la rama Programación");'));
$nodo1->addItem($nodo1_1);

$nodo1_1_1 = new HTML_TreeNode(array('text'=>'HTML','link'=>'http://www.desarrolloweb.com/directorio/programacion/html/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1->addItem($nodo1_1_1);

$nodo1_1_2 = new HTML_TreeNode(array('text'=>'javascript','link'=>'http://www.desarrolloweb.com/directorio/programacion/javascript/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1->addItem($nodo1_1_2);

$nodo1_1_3 = new HTML_TreeNode(array('text'=>'PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('onexpand'=>'alert("Has expandido la rama PHP");', 'oncollapse'=>'alert("Has cerrado la rama PHP");'));
$nodo1_1->addItem($nodo1_1_3);

$nodo1_1_3_1 = new HTML_TreeNode(array('text'=>'Scripts PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/scripts_en_php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1_3->addItem($nodo1_1_3_1);

$nodo1_1_3_2 = new HTML_TreeNode(array('text'=>'Manuales PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/manuales_de_php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1_3->addItem($nodo1_1_3_2);


$nodo1_2 = new HTML_TreeNode(array('text'=>'Sistemas','link'=>'http://www.desarrolloweb.com/directorio/sistemas', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1->addItem($nodo1_2);

$nodo1_3 = new HTML_TreeNode(array('text'=>'Bases de datos','link'=>'http://www.desarrolloweb.com/directorio/bases_de_datos/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1->addItem($nodo1_3);

//Crear la presentación del árbol
$treeMenu = new HTML_TreeMenu_DHTML($menu, array('images' => 'imagesAlt2', 'defaultClass' => 'treeMenuDefault'));

?>
<html>
<head>
<style type="text/css">
body {
font-family: Trebuchet MS,Helvetica,Verdana,Arial,sans-serif;;
font-size: 10pt;
}
.treeMenuDefault {
font-style: italic;
}
</style>
<script src="TreeMenu.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>

<?$treeMenu->printMenu()?><br /><br />

</body>
</html>

Nota: Este archivo de ejemplo está preparado, por las rutas de los includes, para ser colocado en la misma carpeta donde se encuentra la librería TreeMenu.php y el archivo Javascript TreeMenu.js y con la estructura de carpetas que viene en el archivo de descarga del paquete HTML_TreeMenu.

Eso es todo. Esperamos que se pueda entender y poner en marcha sin problemas esta manera de crear una interfaz de árbol dinámico en páginas web con soporte a PHP.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Montse

23/7/2009
Paso variables
El artículo está muy bien explicado y me ha ayudado mucho a entender el funcionamiento de Treemenu. Mi problema es que necesito rellenarlo de manera recursiva con datos extraidos desde una tabla MySql y el problema es que me crea el numero de nodos correctos pero siempre con el contenido del último registro de la tabla. Se te ocurre alguna manera de hacerlo? Gracias.

midesweb

23/7/2009
Recursividad
Hola!

Debes estar haciendo algo mal, que más bien me inclino que será relacionado con tu función recursiva, más que con el uso del árbol. Si indicas el código de tu función igual alguien puede comentarte algo.

Montse

28/7/2009
Arbol PHP
Os dejo el código a ver qué se me está pasando para que no me funcione, me coge siempre el mismo valor para la variable $OpcioMenu.

$cid=connexio();
$sql_menu ="SELECT * FROM menu";
$recordset_menu = odbc_exec($cid,$sql_menu) or die (exit("Error en odbc_exec lectura arbre menu"));

require_once('TreeMenu.php');
$icon = 'folder.gif';
$expandedIcon = 'folder-expanded.gif';
$menu = new HTML_TreeMenu();
while(odbc_fetch_array($recordset_menu))
{
// COMPROVACIÓ PERMISOS USUARI D'ACCÉS A OPCIONS DE MENU.
// ******************************************************
$IDMenu = odbc_result($recordset_menu,"ID_Opcio");
$sql_permisos_menu ="SELECT * FROM permisosmenu WHERE ID_Usuari ='".$_SESSION['Idusuari']."' AND ID_Opcio='$IDMenu'";
$recordset_permisos_opcions = odbc_exec($cid,$sql_permisos_menu) or die (exit("ERROR EN PERMISOS"));
// ******************************************************
if (odbc_num_rows($recordset_permisos_opcions)>0)
{
$OpcioMenu = odbc_result($recordset_menu,"OpcioMenu");
$node1 = new HTML_TreeNode(array('text' => $OpcioMenu, 'link' => $Attach, 'expanded' => true), array('onclick' => "alert('foo'); return false", 'onexpand' => "alert('Expanded')"));
$menu->addItem($node1);
}
}
$treeMenu = &new HTML_TreeMenu_DHTML($menu, array('images' => 'images', 'defaultClass' => 'treeMenuDefault'));
$treeMenu->printMenu();

Montse

28/7/2009
Estilos
Hola tengo otra pregunta, se pueden definir diferentes estilos para que cada nivel de nodos tenga un tipo de letra diferente?

Gracias.

jasmin

15/9/2010
hola!!!
Quisiera saber como hacer para que el menu de arbol me aparezca al lado izquierdo de la pantalla y en el centro m aparezca una tabla de html. Espero me de a entender y me ayuden pronto, Gracias!!!

Lucas

07/5/2017
require
el archivo .php de lo devo almacenar dentro de la carpeta htmltree_menu ? para el buen funcionamiento de los require???? saludos