Relatório HTML com subitens

29 de junho de 2011 2 respostas

edward.juniorr 29 de junho de 2011

Pessoal

preciso fazer uma lista com subitens na tela … não é um menu … e sim uma relatório em html mesmo… com várias colunas

mais ou menos assim

+ Item111111                                aqui terão várias outras colunas   
   + Subitem   
      alguma soisa   
      alguma coisa 2   
      alguma coisa 3   
   + SubItem222   
      alguma coisa 5555   
      alguma coisa 6   
+ Item22222222   
   outra coisa 1   
   outra coisa 2  
+ Item111111                                aqui terão várias outras colunas 
   + Subitem
      alguma soisa
      alguma coisa 2
      alguma coisa 3
   + SubItem222
      alguma coisa 5555
      alguma coisa 6
+ Item22222222
   outra coisa 1
   outra coisa 2

isso seria uma lista de um VO … cada vo tem uma lista de filhos caso tenha…

queria trazer os itens fechados… e quando o usuário clica no + ele passa o VO e retorna os filhos…

alguem tem um exemplo parecido … alguma coisa pra me ajudar…

eu tenho a lista toda carregada … agora preciso de um jeito pra tratar isso… nunca usei ajax…
alguem??? tem um exemplo???

vlwwwwwwwww

2 Respostas

redr4gon 29 de jun. de 2011

ou pode ir no google e digitar LISTA HTML

é só colocar isso num arquivo e salvar ele com o nome de HTML e executar ele q vai abrir no browser do kra

Matruskan 29 de jun. de 2011

Com javascript, você pode fazer algo mais ou menos assim:

<html>
  <head>
    <script type="text/javascript">
     var nodo2 = false;
     function toggleNodo2(){
       if(nodo2){
         nodo2 = false;
         document.getElementById("nodo2").style.display = "none";
       } else {
         nodo2 = true;
         document.getElementById("nodo2").style.display = "block";
       }
     }
    </script>
  </head>
  <body>
    <ul id="nodo1">
      <li>
	    <table>
          <tr>
            <td onclick="toggleNodo2();">+</td>
            <td>asdf</td>
            <td>asdf</td>
          </tr>
        </table>
      </li>
      <ul id="nodo2" style="display:none;">
	    <li>
		  <table>
            <tr>
              <td>-</td>
              <td>asdf</td>
              <td>asdf</td>
            </tr>
          </table>
        </li>
      </ul>
    </ul>
  </body>
</html>

ou assim:

<html>
  <head>
    <script type="text/javascript">
     var nodo2 = false;
     function toggleNodo2(){
       if(nodo2){
         nodo2 = false;
         document.getElementById("nodo2").style.display = "none";
       } else {
         nodo2 = true;
         document.getElementById("nodo2").style.display = "block";
       }
     }
    </script>
  </head>
  <body>
    <div id="nodo1">
      <table>
        <tr>
          <td onclick="toggleNodo2();">+</td>
          <td>asdf</td>
          <td>asdf</td>
        </tr>
      </table>
    </div>
   	<div id="nodo2" style="display:none;">
      <table>
    	   <tr>
         	<td>-</td>
         	<td>asdf</td>
         	<td>asdf</td>
    	   </tr>
    	 </table>
   	</div>
  </body>
</html>

E ainda pode usar CSS para deixar as coisas mais bonitinhas. Se quiser, dá para fazer animações com jQuery.
Então, o seu programa criaria o arquivo .html como se fosse um arquivo texto normal, e não precisaria de nenhum ajax.

De qualquer forma, você teria que aprender um pouco de javascript (e talvez de CSS) para fazer isso que você quer.

Se, por outro lado, você quiser fazer uma aplicação J2EE, eu poderia sugerir o TreeTable, do Primefaces: http://www.primefaces.org/showcase/ui/treeTable.jsf
Mas a sua pergunta seria melhor respondida no fórum de desenvolvimento para web: http://www.guj.com.br/forums/show/6.java

Criado 29 de junho de 2011

Ultima resposta 29 de jun. de 2011

Respostas 2

Participantes 3

2 Respostas

Topicos relacionados