Yahoo ha liberado una libreria muy buena (
YUI) Donde ellos hacen la recursividad para la creacion del arbol.
Lo unico que necesitas hacer es bajarla y utilizar los archivo necesarios, en mi caso, te mando un script con el que he logrado ya armar un arbol de este tipo, espero lo comprendas :)
Código PHP:
<!-- Namespace source file -->
<script src = "yahoo.js" ></script>
<!-- Dependency source files -->
<script src = "event.js" ></script>
<!-- TreeView source file -->
<script src = "treeview.js" ></script>
<script src="treeview-debug.js" ></script>
<script src="logger.js"></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("treeDiv1");
var root = tree.getRoot();
<?php
// Realizo la consulta de la tabla
$res = $db->query("select ID,nombre,parent,nivel from proy_actividades where IDProyecto=".$ID);
while($row = $res->fetchRow(DB_FETCHMODE_OBJECT))
{
// Cambia las tíldes a código html para que no de errro el javascript
$nombre = htmlentities($row->nombre);
?>
// Genero las etiquetas de cada registo
var label<?php echo $row->ID;?> = { label: "<?php echo $nombre;?>", href:"proyecto.php", target:"main" };
<?php
// En mi caso como los registros de primer nivel tiene parent 0 hago la validacion para saber quienes iran en el root
if($row->parent==0)
{
$parent = "root";
}
else
{
$parent = "nodo".$row->parent;
}
?>
// genero los nodos
var nodo<?php echo $row->ID;?> = new YAHOO.widget.TextNode(label<?php echo $row->ID;?>, <?php echo $parent;?>, false);
<?php
}
?>
tree.draw();
}
</script>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="tree.css">
<link rel="stylesheet" type="text/css" href="screen.css">
<div id="content">
<h3>Mi árbol</h3>
<div id="treeDiv1"></div>
</div>
</div>
</body>
Espero te funcione, al menos a mi me ayuda muchisimo y la recursividad se la dejo a los amigos de Yahoo.
Salu2,
Jars
