Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais
TBODY, THEAD : JQuery e a Gridview
Data:4/5/2011

Translate this page now :





Categories: ASP.NET , JQuery

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :
Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon

Veja Também


 

A imporância do JQuery no desenvolvimento web já é algo incontestável, nem preciso me alongar sobre isso.

Para facilitarmos a aplicação do JQuery podemos utilizar alguns truques com a GridView. Vejamos um exemplo interessante :

   1: $(document).ready( function () {
   2:     $(".minhatabela tr").mouseover(function () {
   3:         $(this).addClass("destaque");
   4:     })
   5:         .mouseout(function () {
   6:             $(this).removeClass("destaque");
   7:             });
   8: });

 

Nesse pequeno exemplo estamos fazendo com que as linhas da tabela sejam destacadas sempre que o mouse passar sobre elas. É interessante observar o bom uso das classes CSS para isolar o trecho em JQuery de outras questões, como por exemplo a formatação de destaque e a definição de qual tabela será formatada.

Porém, aplicando este exemplo para a table gerada por uma gridview, todas as linhas da gridview ganharão este efeito, incluindo o título, o rodapé e o paginador, o que provavelmente não é o efeito desejado.

Como fazer para que apenas as linhas do corpo da tabela ganhem este efeito ?

Uma table em HTML pode ser construida com algumas tags adicionais, tags que apesar de em um primeiro momento não terem um efeito visual direto, são muito importantes para facilitar a aplicação de CSS e efeitos com JQuery.

Eis as tags :

THEAD : Marca as linhas da tabela que fazem parte do cabeçalho

TBODY : Marca as linhas da tabela que fazem parte do corpo da tabela

TFOOT : Marca as linhas da tabela que fazem parte do rodapé da tabela

Como aplicar essas tags na gridview, que gera as tags de tabela automaticamente ?

Com uma codificação simples podemos determinar que cada área da gridview seja renderizada dentro de uma das tags acima. Veja um exemplo :

   1: protected void Page_Load(object sender, EventArgs e)
   2: {
   3:     if (GridView1.HeaderRow != null) 
   4:         GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
   5:     
   6:     if (GridView1.TopPagerRow!=null)
   7:         GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
   8:  
   9:     if (GridView1.BottomPagerRow!=null)
  10:         GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
  11:  
  12:     if (GridView1.FooterRow!=null)
  13:         GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
  14: }

Sobre este código de exemplo, observe o seguinte :

  • Não utiliza-se o TableRowSection.TableBody. Utiliza-se os demais e o que sobra fica no TBODY
  • Cada atribuição é precedida de um if. Essa escrita torna o código versátil, pois pode-se alterar características da gridview sem que seja necessário alterar o código.

Criando um componente

Observe que um código como esse pode ser inserido em um novo componente. Cria-se um componente herdando as características da gridview e implementa-se esse código com algumas propriedades. Porém isso já é outro assunto.



Categories: ASP.NET , JQuery


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
Nenhum comentário foi realizado ainda. Seja o primeiro !
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br