Olá turma, o Gilson estava (estava pq com este post acho que resolvemos) com o seguinte problema:
Precisa ordenar dados em uma tabela, clicando no título da coluna, usando somente javascript pois está trabalhando com ASP delegado que não oferece este tipo de recurso.
Nota: atualmente a maioria dos framework, em várias linguagens, oferece tal recurso.
Tah…. Sugiro, como solução o uso de um plugin do JQuery, o jqGrid (na imagem um exemplo dele ‘em ação’).
e neste post vamos aprender como instalar o jqGrid. é bem simples.
Primeiro passo:
Faça o download da última versão do jqGrid (atualmente a última versão estável é jQuery Grid Plugin 3.4.43.5.3).
Assim vc terá a seguinte estrutura de pastas:
- js (pasta: onde terá todo o código javascript)
- themes (pasta: onde estão os diferentes temas )
- jquery.js (arquivo .js: JQuery versão 1.3.x)
- jquery.jqGrid.js (arquivo .js: Plugin)
Depois de baixar. Descompacte a estrutura acima no seu web server (iis, para ASP; apache, para PHP e etc).
Segundo passo:
Vamos criar nosso exemplo: index.html
|
1 |
< !DOCTYPE html >... |
E pronto! fácimmm fácimm neh?
Bom agora vamos tentar entender o cógido para podermos modificá-lo:
Das linhas 15 a 20 são os ‘links’ dos .js e .css, não vou entrar em detalhes, pois penso que já entendam como funciona, caso tenham alguma dificuldade quanto a isso é só comentar este post que respondo.
Na linha 22 inicia a parte interessante:
|
1 |
jQuery(document).ready( function() { ... } |
É sintáxe do jQuery, que significa: ao carregar o documento execute as instruções “<instruções>” .
Na linha abaixo:
|
1 |
jQuery('#list4').jqGrid({ .... |
Inicializa o jqGrid, onde “#list4” é o identificador da tabela:
|
1 |
Demais detalhes constam no código.
Na linha 42 é criado um vetor que alimentará nossa tabela.
Observe que o vetor é carregado os ‘name‘s definidos na linha colModel.
O restante está comentado no código.
- Baixe o código desse post
- Site do JQuery
- Site do jdGrid
Aproveitem… e comentem eventuais dúvidas.
Um abraço a todos.!
Atualizado em 21 de setembro de 2010.
valeu Adão, ja havia iniciado meus estudos com jquery, mas com seu exemplo ficou bem mais claro pra mim ^^
e pra quem tiver interesse em descubrir o que se pode fazer com essa poderosa biblioteca acessem :
http://www.linksweb.com.br/category/jquery/
Bem didático! Parabéns!!!
Obrigado, Leandro. Gosto bastante desse plugin e pretendo publicar algo sobre a nova versão dele em breve.
Oi, comecei com jqgrid hoje e gostei do seu exemplo, porém ao testar ele não funcionou. o que pode ser?
Olá, carol.
Esse exemplo foi feito com uma versão antiga do grid (3.4.4).
O meu exemplo completo (com todas as dependencias você pode baixar no link: https://adao.eti.br/blog/wp-content/uploads/2009/07/jqgrid.zip ).
Mas atualmente já está na 4.6 ( vc pode pegar em http://www.trirand.com/blog/?page_id=6 ), onde tem inclusive alguns exemplos.
Esse plugin é bem legal. Use e deixe suas impressões, ok?
Abraço.
Baixei o seu exemplo completo e coloquei no servidor. Quando chamo a página index, ela abre em branco e no Firebug aparece escrito:
TypeError: jQuery(…).jqGrid is not a function
caption: “Manipulando Array de dados”
Estava testando no firefox e não estava funcionando…agora testei no chrome e funcionou…
Ok, alguns arquivos .js são inclusos dinamicamente. Me parece que esses não estão sendo carregados.
Então inclua os dois “.js”, como na imagem.
Agora está funcionando….obrigada pela ajuda 🙂
Através do seu exemplo eu conseguiria fazer as modificações para usar “Navigator” ?? tentei fazer mas ele se perde ao tentar colocar os botões de Add, Edit, Delete e Searching. Aparece somente a parte de paginação.