Pesquisar este blog

sexta-feira, 7 de outubro de 2011

Javascript Expand and Colapse - Agrupar e Desagrupar - Part 2

Eu sei, demorei pacas pra por esse post, vida corrida!!

Como disse antes esse é um exemplo de agrupamento possível, pode-se fazer muitos níveis, aqui vamos fazer apenas 1.

1 - Construa uma query com essa cara.


Só dois níveis nesse exemplo.







2 - Construa uma página com essa cara.

Repare que existem 5 HTML Itens, disponha-os exatamente da mesma forma.
Agora vamos ao conteúdo deles:

HTML 1: <script type="text/javascript"> A função do post anterior</script>

HTML 2: <span id="tbl1">

HTML 3:
<img src="../images/PropertyGroup_plus.gif" onclick="ExpandCollapse(this);" style="cursor:hand; vertical-align:middle; margin-right:2px"/>

HTML 4: </span>

HTML 5: <script type="text/javascript">StartHidden('tbl1');</script>

3 - E por fim acerte o padding(espaçamento) no Nível 1 em 20 px.

Com isso está pronto, rode e veja o que acontece!

Caso queira inserir mais níveis, faça o padding incremental, mas sempre deixe o último nível(nesse caso o 2) sem padding.
Nível 3 normal
Nível 2 20px
Nível 1 40px


Essa função só server para grupos superiores, ou seja totais na parte de cima do relatório, para totais na parte inferior é necessário adequar a função, se precisar de ajuda me manda um e-mail.

Boa noite a todos.