Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais
JQuery e a GridView
Data:6/18/2012

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


Implementar pequenos exemplos com seletores jQuery pode parecer simples, mas implementa-los em aplicações web reais junto a tecnologias de servidor pode envolver muitos truques.

Vamos então nesse pequeno post fazer um passo-a-passo que demonstre os problemas pelos quais esbarrará ao fazer uma aplicação de um efeito simples em linhas de uma GridView.

Problema

Implementar um efeito de mouseover sobre as linhas do corpo de uma GridView.

A Página

A página que usuaremos para demonstração do problema terá duas GridViews, cada uma com cabeçalho, paginador e rodapé

A Solução Trivial

A solução trivial para o problema seria implementar o seguinte código :

$(document).ready( function () { $(“tr”).hover(function () { $(this).addclass(“overclass”) },

function () { $(this).removeclass(“overclass”) })

})

Porém o resultado trará vários problemas :

  • Ambas as gridviews serão afetadas
  • Linhas de rodapé e cabeçalho serão afetadas
  • Se houvesse outras tabelas meramente para layout, seriam afetadas

Afetando apenas uma GridView

Existem duas alternativas para selecionar apenas uma gridview :

  • Selecionar pelo ID da GridView
  • Selecionar por uma classe aplicada apenas naquela GridView

Selecionar pelo ID da GridView

O ID da GridView é preenchido no servidor, porém no client ele pode mudar devido as formas de nomenclatura de objetos no client.

As alternativas são as seguintes :

  • No .NET 4.0 em diante, alterar o clientIDMode da gridview para static para que o clientID fique fixo.
  • Passar o ClientID do servidor para o client, para o código jQuery. Você pode ler sobre como isso é feito em ….
  • Filtrar por parte do ID, já que o ClientID é formato pelo ID do servidor e mais alguns trechos montados pelo ASP.NET. O seletor ficaria $(“table[id*=’iddoservidor’]”)

Selecionar por uma Classe

A GridView possui a propriedade CSSClass. Basta preencher com um nome de classe. De fato, a classe não precisa nem ao menos existir, ela funcionará como um “marcador” que permitirá ao jQuery selecionar a tabela.

Assim o selector fica $(“table.classe”) ou até mesmo $(“.classe”)

Resolvendo o primeiro problema

Opção 1 : $(“table.classe tr”)

Opção 2 : $(“table[id*=’iddoservidor’] tr”)

Essas são as opções mais simples.

Cabeçalho e Rodapé ainda serão afetados

Ambos são linhas dentro da tabela, serão naturalmente afetados. Uma solução trivial seria a seguinte :

$(“table.classe tr:not(tr:first,tr:last)”)

ou

$(“table[id*=’iddoservidor’] tr:not(tr:first,tr:last)”)

Porém essa não é uma solução versátil : Uma gridview pode ter além do rodapé um paginador inferior, assim como também pode possuir um paginador superior. Duas linhas em cada extremidade da grid que não deveriam ser afetadas.

Para resolver esse problema podemos utilizar tags que indiquem a função das linhas na gridView : thead, tbody e tfoot. É necessário uma pequena configuração da gridview para que ela gere essas tags, vejam detalhes no artigo em TFOOT, THEAD e TBODY com a GridView

Com a gridview gerando essas tags, naturalmente mudamos o seletor do jquery para :

$(“table[id*=’iddoservidor’] tbody tr”)

Porém não teremos o efeito desejado : O paginador ainda será afetado.

Solucionando o problema do paginador

Ocorre que o paginador da gridview é formado por uma 2a tabela que é criada dentro da linha do paginador. Mesmo não existindo uma tag TBODY explicita, o browser considera a presença de um tbody implicita e seleciona o TR da 2a tabela.

A questão é que ao utilizar “table[id*=’iddoservidor’] tbody tr” no seletor estamos pedindo TR’s que estejam dentro de um TBODY que esteja dentro da nossa grid. O TBODY do paginador está dentro da nossa grid, com isso ele também é afetado.

Solução : Indicar que desejamos apenas o TBODY que está no nível imediatamente abaixo da nossa tabela.

O seletor fica : “table[id*=’iddoservidor’] > tbody tr”

Como o TBODY do paginador não está imediatamente abaixo da nossa tabela – está em uma 2a tabela dentro de uma linha do rodapé da nossa tabela – ele deixa de ser afetado por esse novo seletor que finalmente atinge o objetivo.

A seleção por classe também pode ser utilizada :  “table.classe > tbody tr”



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