jqDjangoGrid – plugin JQuery com Django para criar datagrids

gustavohenrique — Fri, 24 Jul 2009 16:26:11 +0000

Tela do jqDjangoGrid

jqDjangoGrid é um plugin para JQuery com uma aplicação plugável do Django para criar um datagrid.
Fácil de instalar e customizar, possui ordenação de resultados e pesquisa usando ajax.
Atualmente não suporta recurso de inserir ou alterar registros diretamente no datagrid, mas possui um método genérico para remoção de registros e outro que retorna a PK (Primary Key) do objeto selecionado.

INTRODUÇÃO

Neste artigo mostrarei como é fácil instalar e usar o jqDjangoGrid. Todos os códigos estão comentados para ajudar à quem precisar fazer alguma modificação, por isso eu aconselho a usar algum compactador de código javascript se for usar em ambiente de produção.
O tema padrão é o mesmo utilizado em um artigo anterior sobre datagrid com django, usando tons cinzas e azul. É fácil criar novos temas, bastar alterar o arquivo CSS e substituir as imagens.

~~Estou disponibilizando 2 arquivos para download, um contendo apenas o jqDjangoGrid e o outro contendo uma aplicação de exemplo (Um cadastro de bookmarks)~~. É necessária a biblioteca JQuery para funcionar. Os pacotes estão com a versão 1.3.2 dessa biblioteca.

Download:

Baixe a última versão com um exemplo no site github.com.
Código no GitHub

INSTALAÇÃO E UTILIZAÇÃO

Instalação:

Descompacte o pacote jqdjangogrid.tar.gz;
copie o diretório jqdjangogrid, que é a app em django, para o diretório do seu projeto;
Copie os arquivos .js para o diretório de arquivos javascript do seu projeto (dento do MEDIA_ROOT);
Copie o diretório themes para o diretório de arquivos CSS do seu projeto (também dentro do MEDIA_ROOT)

Utilização:

Insira jqdjangogrid em INSTALLED_APPS localizada no settings.py e depois crie uma regra no urls.py.

INSTALLED_APPS = (
    # outras apps instaladas aqui
    'jqdjangogrid',
)

urlpatterns = patterns('',
    # suas outras regras aqui
    (r'^jqdjangogrid/', include('jqdjangogrid.urls')),
)

Inclua uma referência para os arquivos jqdjangogrid.css, jquery.js e jqdjangogrid.js dentro do template HTML principal. Ex.:

...

Crie um div qualquer para servir como contâiner para o datagrid.

Agora é só criar um objeto datagrid passando as configurações. Abaixo um exemplo com as configurações básicas criado no momento em que a página é carregada:


<script type="text/javascript">
$(document).ready(function() {
    $('#mydatagrid').datagrid({
        'appLabel': 'myapp',
        'modelName': 'MyClassName',
        'cols': {
            "pk": {"label": "", "width":"10px"},
            "field1": {"label": "Campo 1", "width": "100px"},
            "field2": {"label": "Campo 2", "width": "300px"},
        },
    });
});
script>

Assim, ao carregar a página, será criado um datagrid contendo 3 colunas. Quando o nome da coluna for pk, vai aparecer um radio input cujo valor é a chave primária. Os outros atributos do campo são largura e label que vai aparecer no datagrid.

Conheça outros recursos na próxima página.

Compartilhe esse artigo

Gustavo Henrique.net » datagrid

jqDjangoGrid – plugin JQuery com Django para criar datagrids

INTRODUÇÃO

INSTALAÇÃO E UTILIZAÇÃO