http://milaneze.com.br/post/2011/04/22/TreeGrid-Parte-1-HTML.aspx
Tive que fazer no trabalho uma grid que tivesse a possibilidade de ser feito um drill down, para mostrar detalhes de uma determinada área. Seria como um GridView com aspecto de TreeView.
Cheguei a pesquisar um pouco sobre o assunto e cheguei a achar alguns exemplos legais, mas que não eram exatamente o que eu precisava (esse, por exemplo: http://www.obout.com/t2/ex_columns_aligned.aspx). Resolvi, então, treinar um pouco o JavaScript com JQuery que já estava um pouco enferrujado e fiz um código do início. A idéia era que esse código processasse a tabela em HTML resultante da GridView. Isso significa que o código em JavaScript pode ser usado independente da linguagem usada no server, como ASP.NET, PHP, ASP, etc (isso parece óbvio pra quem entende, mas só pra detalhar mesmo).
Observando o código HTML disponível no final do artigo é possível entender o que fazer com o código do lado servidor para obter uma tabela com os mesmos estilos (CSS) que a mostrada, para que então o JavaScript faça seu trabalho. A tabela no código HTML deve conter:
- Classe CSS "treegrid" na tag da tabela ("table");
- Cada linha ("tr") ) deve conter uma classe que identifique seu nível na hierarquia da árvore ("nivel-1" para o primeiro nível, por exemplo);
- Hyperlink ("a") com o texto em branco e a classe "mostrar-esconder" na célula em que desejar mostrar o sinal de + ou - para dar o expand ou collapse da árvore;
- Caso queira que algum nível fique amostra ao iniciar, é possível atribuir a classe CSS "mostrando" à tag "tr" e então um nível abaixo a esse será mostrado por padrão, na inicialização da página.
Código para download: http://dl.dropbox.com/u/20361010/blog/treegrid/treegrid_html01.rar
Nos próximos posts, vou mostrar exemplos para o código no lado servidor, dependendo de como os dados estiverem disponíveis e da forma que se deseja mostrar.
Nenhum comentário:
Postar um comentário