Generar una lista de árbol(tree list) html en php : I

July 16, 2008 | In: php, tutoriales

En esta primera parte voy a generar una lista de árbol desde un array() que me he inventado, a modo de ejemplo; en la siguiente lo haré desde una base de datos; que es más fácil aún.

Por ahora para poder ver técnica nos vale; así será mucho más sencillo de comprender.

Lo primero es crear nuestra tabla de datos; una table que necesita de un requisitos; tener dos llaves. La primera llave será el Id del padre, el segundo será el Id de la variable o hijo.

$lista[idPadre][id]

Luego necesitamos una función recursiva que nos cree la lista; pero a esta función habrá que pasarle un parámetro, para decirle a partir de donde necesita crear el árbol(tree).

pego el código; y así lo podréis ver mejor:

$lista=array();
$lista['0']['1']='parque';
$lista['0']['2']='colegio';
$lista['0']['3']='casa';
$lista['1']['4']='cosas';
$lista['1']['5']='gente';
$lista['1']['6']='plantas';
$lista['2']['7']='mesa';
$lista['2']['8']='silla';
$lista['2']['9']='jardin';
$lista['3']['10']='profe';
$lista['3']['11']='gamberro';
$lista['3']['12']='lapiz';
$lista['6']['13']='árbol';
$lista['6']['14']='flor';
$lista['6']['15']='agua';
$lista['9']['16']='jasmin';
$lista['9']['17']='lirios';
$lista['5']['18']='pedro';
$lista['5']['19']='maría';
function generaArbol($idPadre, &$lista)
{
if(!isset($lista[$idPadre])){
return '';
}
$level = $lista[$idPadre];
$out = '
<ul>';
foreach($level as $k=>$v){
$out .= '
<li>';
$out .= $v;
$out .= generaArbol((string)$k, $lista);
}
$out .= '</li>
</ul>
';
return $out;
}
echo generaArbol('0', $lista);


7 Responses to Generar una lista de árbol(tree list) html en php : I

Avatar

Ruben Espin

August 6th, 2008 at 4:45 pm

Gracias….. este era el algoritmo por el cual estuve rompiendome la cabeza como tres semanas. Excelente ayuda. Si requieren ayuda con un árbol como objeto yo logré implementarlo con Zapatec un framework Ajax….. Otra vez mil gracias por el algoritmo.

Avatar

cuatroxl

August 6th, 2008 at 4:51 pm

La primera vez que necesité hacerlo, fue hace unos años y también me resulto un poco complicado de entenderlo.
para el siguiente ejemplo lo haré para Exjs, tirando desde una db con Zend_DB

Avatar

GABRIEL

November 30th, 2010 at 4:08 pm

muy buen post pero necesito que me muetre el arbol desde una bd y que con click derecho me de la opcion de dar de alta, baja o modificacion del componente del arbol espero q me puedan ayudar graciass…

Avatar

acido69

November 30th, 2010 at 4:23 pm

Lo siento Gabriel; pero eso que pides son muchas cosas y si eres programador podrás encontrar la solución en el manual de PHP y Javascript.

Avatar

Victor

February 4th, 2011 at 3:57 am

Creo que gabriel se pasa hace tiempo encontré este link :

http://crisp.tweakblogs.net/blog/317/formatting-a-multi-level-menu-using-only-one-query.html

hace lo mismo pero de una manera distinta y llega a lo mismo que posteas tú

Saludos

Avatar

Victor

February 4th, 2011 at 4:08 am

A proposito me tome la libertad de hacerle unos cambios a tu funcion y con mysql funciona asi para un menu

$consultaMenu = $db->consulta(” SELECT menus_id AS id , IFNULL(menus_menus_id,0) AS idpadre , menus_nombre FROM menus “);
$menu = array();
while ( $rsConsultaMenu = $db->fetch( $consultaMenu ) ) {
$menu[$rsConsultaMenu['idpadre']][$rsConsultaMenu['id']] = $rsConsultaMenu['menus_nombre'];
}

function generaArbol( $idPadre , &$lista) {
if ( !isset( $lista[$idPadre] ) ) {
return ”;
}
$out = ”;
foreach( $lista[$idPadre] AS $k => $v ) {
$out .= ” . $v . ”;
$out .= generaArbol( (int)$k , $lista);
}
$out .= ”;
return $out;
}

Avatar

acido69

February 4th, 2011 at 10:58 am

Victor, gracias por el aporte.

Efectivamente, la tabla necesita dos llaves(id e idPadre) y con eso generas el array para poder crear el árbol.

Comemtario