Category Archives: jqGrid

Instalando o plugin jqGrid (plugin jQuery)

Posted on by
3

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

< !DOCTYPE html >
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqGrid.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<script type="text/javascript" src="js/jqDnR.js"></script>
<script type="text/javascript"></script>
</head>
<body> ...
</body>
</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:

jQuery(document).ready( function() { ... }

É sintáxe do jQuery, que significa: ao carregar o documento execute as instruções “<instruções>” .

Na linha abaixo:

jQuery('#list4').jqGrid({ ....

Inicializa o jqGrid, onde “#list4″ é o identificador da tabela:

 

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.

Aproveitem… e comentem eventuais dúvidas.

Um abraço a todos.!

Plugin JQuery - jqGrig

Atualizado em 21 de setembro de 2010.