jqDjangoGrid – plugin JQuery com Django para criar datagrids

julho 24th, 2009

jqDjangoGrid – plugin JQuery com Django para criar datagrids

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.:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="StyleSheet" type="text/css" href="/path_to_your_css/css/themes/default/jqdjangogrid.css">
<script language="JavaScript" type="text/javascript" src="/path_to_your_js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="/path_to_your_js/jqdjangogrid.js"></script>
...

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

<div id="mydatagrid"></div>

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:

<!-- dentro da tag head -->
<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

Pages: 1 2

Posted in Django

Tags: datagrid, Django, jquery

You can leave a response, or trackback from your own site.

One Response to “jqDjangoGrid – plugin JQuery com Django para criar datagrids”

Enrico disse:

7 de agosto de 2009 às 10:02

Gustavo!

Muito legal, jQuery é o canal mesmo.

Talvez seja uma boa cuidar com a vírgula após o último item de um dicionário ou lista em Javascript, pode quebrar no IE (talvez só no 6, não tenho certeza).

Abraço.

Responder