Necesito componente: arbol de carpetas

bauhaus1975 · #1 (**permalink**) 17/05/2005, 06:59

Hola gente del foro.

Estoy buscando un componente (he pensado javascript por lo del standard) que muestre un arbol de carpetas (o items de algún tipo) que se despliegue, recoja etc como el del explorador de windows, al que puede añadirle funcionalidad para representar una estructura de categorias y poder seleccionarlas desde dicho componente en una web de administración que tengo que hacer.

A ver si alguien conoce algo así...
Muchas gracias y un saludo.
Miguel.

amnix · #2 (**permalink**) 17/05/2005, 16:17

Lo haces en javascript y haciendo uso de lasetiquetas <div>
este es un codigo pequeño: esta en hard code pero lo ppuedes implementar para jalar los items de una base de datos :) paga esto en tu pagina y ve que hace:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0079)http://webdeveloper.earthweb.com/rep...64771/tree.htm -->
<HTML><HEAD><TITLE>Cross Browser Navigation Tree</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK
href="images/tree.css" rel=stylesheet>
<SCRIPT language=javascript
src="images/tree.js"></SCRIPT>

<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><A id=xproducts href="javascript:Toggle('products');"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
    <TD><B>OFF</B></TR></TBODY></TABLE>
<DIV id=products style="DISPLAY: none; MARGIN-LEFT: 2em">
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><IMG hspace=0
      src="images/text.gif"
border=0 width="16" height="16"></TD>
    <TD><A
href="off.jsp" target="principal">Consulta</A></TD></TR></TBODY></TABLE>

<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><IMG hspace=0
      src="images/text.gif"
border=0 width="16" height="16"></TD>
    <TD><A
  href="cuerpo.jsp" target="principal">Principal</A></TD></TR></TBODY></TABLE>
    </DIV>
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><A id=xsupport href="javascript:Toggle('support');"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
    <TD><B>OPTO</B></TR></TBODY></TABLE>
<DIV id=support style="DISPLAY: none; MARGIN-LEFT: 2em">
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><IMG height=16 hspace=0
      src="images/text.gif" width=16
border=0></TD>
    <TD><A href="opto.jsp" target="principal">Consulta</A></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><IMG height=16 hspace=0
      src="images/text.gif" width=16
border=0></TD>
    <TD><A href="cuerpo.jsp" target="principal">Principal</A></TD></TR></TBODY></TABLE>
</DIV>
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><A id=xcontact href="javascript:Toggle('contact');"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
    <TD><B>SWAPS</B></TR></TBODY></TABLE>
<DIV id=contact style="DISPLAY: none; MARGIN-LEFT: 2em">
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><IMG height=16 hspace=0
      src="images/text.gif" width=16
border=0></TD>
    <TD><A href="swaps.jsp" target="principal">consulta</A></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><IMG height=16 hspace=0
      src="images/text.gif" width=16
border=0></TD>
    <TD><A href="cuerpo.jsp" target="principal">principal</A></TD></TR></TBODY></TABLE></DIV>
    <TABLE cellSpacing=1 cellPadding=1 border=0>
  <TBODY>
  <TR>
    <TD width=16><A id=xsupport href="cuerpo.jsp" target="principal"><IMG hspace=0 src="images/folder.gif" border=0 width="16" height="16"></A></TD>
    <TD><B><A href="cuerpo.jsp" target="principal" >MENU</A></B></TR></TBODY></TABLE>

<P><A href="javascript:Expand();">Expand All - </A><A
href="javascript:Collapse();">Collapse All</A> </P></BODY></HTML>


El codigo java script lo pones  en la ruta especificada hasta arriba y es el que sigue:

function Toggle(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
     key.innerHTML="<img src='images/folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
   } else {
      obj.style.display="block";
      key.innerHTML="<img src='images/textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
   }
}

function Expand() {
   divs=document.getElementsByTagName("DIV");
   for (i=0;i<divs.length;i++) {
     divs[i].style.display="block";
     key=document.getElementById("x" + divs[i].id);
     key.innerHTML="<img src='images/textfolder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
   }
}

function Collapse() {
   divs=document.getElementsByTagName("DIV");
   for (i=0;i<divs.length;i++) {
     divs[i].style.display="none";
     key=document.getElementById("x" + divs[i].id);
     key.innerHTML="<img src='images/folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
   }
}

Las imagenes no te apareceran debes especificarle alguna otra esto yo ya lo tengo funcionando por si tienes dudas :)

bauhaus1975 · #3 (**permalink**) 18/05/2005, 01:42

Muchas gracias anmix.
He realizado la prueba como me has dicho y parece que en el ejemplo funciona ok, Tengo que cargarlo con categorias de una base de datos y formar un árbol, veré a ver si puedo usarlo...

Saludos,
Miguel

amnix · #4 (**permalink**) 18/05/2005, 06:54

Este arbol yo ya lo implemente para tomar la informacion de una base de datos y si se puede solo tienes que traer la informacion con JAVA ponerlo en un arreglo e ir creando tu arbol con for's. tu paina se ira creando dinamicamente