De tanto procurar e testar scripts para scroll em tabelas (dataGrid), resolvi quebrar um pouco a cabeça e escrever um plugin via jQuery para tal. Sabemos que para FireFox 2 um simples overflow:auto com algum height na tag de tbody resolveria, mas infelizmente, alguns browsers não suportam isto. O FireFox 3 tem algumas diferenças com relação ao scroll no tbody, se o FF2 respeita a altura do td, o FF3 redimensiona a altura do td caso não ultrapasse a altura definida no tbody.
Não vou escrever o fonte do plugin aqui, caso tenham interesse basta comentar solicitando js.
Algumas imagens
Tabela original:
Tabela com scroll FireFox e IE7:
Opera 9.5
Tabela com rowspan,colspan e tfoot
A estrutura solicitada para trabalhar com o plugin é a seguinte:
<div><table><thead><tr><th></th></tr></thead></table></div>
O js:
$(function(){ $('div').scrollTable({height:200}); });
Fiz um post no forum do jQuery Brasil:
http://jquerybrasil.com/forum/index.php?showtopic=496
[s]
JunioR
Po cara muito interessante da para fazer coisas bem legais.
Passa o JS pro pessoal ae….
A ideal para relatórios essa ferramentinhas…
Poxa se você puder me mandar nesse email fico muito agradecido!
Poxa … manda esse plugin pra eu amigo. Solucao de todos os meus problemas com tabelas grandes !!
Junior, Muito interessante, e simples tambem,
se for possivel, compartilhar o js, fico muito grato.
obrigado
Junior.
Esta ótimo, por favor, me envie o JS.
Obrigado.
Gostaria de receber o js para implementar em um sistema administrativo. Esse plugin vai ser uma boa.
Valeu
Abraço
Gostaria também de receber o fonte do plugin para implementar um cadastro de clientes.
Valeu mano!
também gostaria de receber o .js.
Abraços
Tambem gostaria de receber o arquivo.js
grato irmão
[...] na prática 31 10 2008 Depois do lançamento deste plugin aqui no blog, vou mostrar sua utilização. A única complexidade é a utilização de rowspan e [...]
Estou iniciando neste framework. Muito interessante este script. Poderia me passar o js? Valeu
Já estou aplicando JQuery na minha tabela para ordenação porem como tenho varios sub-niveis na minha tabela preciso de uma rolagem tentei com mais vai dar muito brabalho e ainda vai ficar feio.
Se você pudesse me mandar o seu plugin ficaria muito satisfeito desde já agradecido.
manada o javascript
Poderia mandar para mim por gentileza?
Manda esse js ai p mim…
Vlw
Postei o fonte aqui:
http://gist.github.com/81927
[s]
Amigo, muito bom este seu script, só falta ele funcionar no internet explorer 8, o header não acompanha a tabela… você sabe me dizer que propriedade do Header que pode estar causando problema?
Vou fazer alguns testes com ie8, estou trabalhando nisto, obrigado pelo feedback.
[s]
Excellent plugin!
One thing though: If I call scrollTable() on the same element more than once, the header row is duplicated. The reason I am doing this, is because the table content needs to be updated after a user has made some changes (the changes are posted via Ajax to a server page and the callback results are being used as table content).
Is this something you, or anyone else, are aware of and have a workaround for?
Thank you
Peter,
Thank you for your comment.
See ‘demo 5′ in http://juarez.ecomtecnologia.com.br/jquery/scrollTable/
I created an ajax request (pagination).
Don’t forget see source page.
Thank you Juarez, it now works like a charm!
Amigo, você já fez os testes com o IE8?
Eu usava um outro componente para o scroll das tabelas mas não funciona mais porque ele usava style.setExpression em alguns elementos e a Microsoft tirou isso do IE8.
Se já tiver concluído, por favor, me envie o js.
Desde já, grato.
Rodrigo,
Veja este teste: http://juarez.ecomtecnologia.com.br/jquery/tbody.php
[s]
Opa,
É isso ae!!!
Vlw amigo… vo colocar nas páginas aqui…
Flw
Parece ser muito bom, poderia enviar para o meu e-mail o plugin?
Valeu