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

Django com MySQL, JQuery, Ajax e JSON – Parte 1

gustavohenrique — Tue, 11 Nov 2008 15:23:28 +0000

Introdução

Django é um framework MVC para desenvolvimento web escrito em python. Proporciona velocidade no desenvolvimento, código limpo e organizado e uma poderosa ferramenta de administração.
Essa é a primeira parte de uma série de artigos sobre como criar um sistema de gestão de provedor de internet utilizando Django, MySQL, Javascript (JQuery), Ajax com JSON, CSS e Linux. No momento abordaremos apenas a parte de cadastro de clientes.
Para melhor entendimento, é desejável conhecimento básico em desenvolvimento web, Python e Linux.
Instalação, características, manual e outras informações podem ser encontradas no site Django Brasil.

Sobre o Sistema

Como forma de estudo, resolvi portar as funcionalidades básicas de um sistema antigo que desenvolvi em PHP para Django. Trata-se de um sistema de gestão de provedor de internet, que possibilita o cadastro de clientes, controle de banda, regras de firewall, fluxo de caixa e relatórios gerenciais, interagindo com ferramentas em ambiente Linux. Chamaremos nosso sistema de Sigep – Sistema de Gestão de Provedor. Nome nada criativo, eu sei, mas vamos deixar assim mesmo.

Iniciando

O sistema completo será desenvolvido em Linux, utilizando softwares específicos para o mesmo. É possível desenvolver em Windows e MacOS X, porém o ambiente de produção necessariamente deve ser Linux. Abaixo a descrição do ambiente de desenvolvimento utilizado:

Sistema Operacional: Ubuntu 8.04
IDE/Editor: Komodo Edit para códigos do Django e Geany 0.13 para HTML e CSS
Banco de Dados: MySQL 5.0
Linguagem: Python: 2.5 e Django 1.0

Instalação

Não será abordado o processo de instalação nesse artigo. No site www.djangobrasil.com tem um ótimo tutorial de instalação em Windows e Linux.

Projeto Vs. Aplicação

Em Django, projeto é o sistema no todo e aplicação é um módulo desse sistema. No nosso projeto Sigep, teremos várias aplicações (módulos), que são: cliente, rede, relatório, etc. Você pode criar uma única aplicação contendo toda funcionalidade do sistema, porém isso deixaria o código mais extenso e de difícil manutenção.

Criando o Projeto

Abra um terminal, entre no diretorio onde deseja trabalhar e crie o projeto com o script django-admin.py.
gu@notebook:~$ mkdir projetos gu@notebook:~$ cd projetos gu@notebook:~$ django-admin.py startproject sigep gu@notebook:~$ cd sigep gu@notebook:~$ ls sigep __init__.py manage.py settings.py urls.py

O django-admin.py criou um diretório com o nome do projeto contendo os seguintes arquivos:

__init__.py: Arquivo vazio. Serve apenas para identificar que é um pacote python
manage.py: Script para gerenciar o projeto no django
settings.py: Arquivo de configuração do projeto
urls.py: Onde é definido o mapeamento das URLs

Configurando o Projeto

Vamos editar o arquivo settings.py e incluir as linhas abaixo:

1 2	import os LOCAL = lambda args:os.path.join(os.path.dirname(__file__), args)

As linhas acimas criam uma função para retornar o caminho absoluto do diretório do nosso projeto. Agora vamos alterar as seguintes variáveis:

DATABASE_ENGINE = 'mysql'
DATABASE_NAME = 'sigepdjango'
DATABASE_USER = 'usuario_do_mysql_aki'
DATABASE_PASSWORD = 'senha_do_usuario_do_mysql_aki'
 
TIME_ZONE = 'America/Sao_Paulo'
 
LANGUAGE_CODE = 'pt-br'
 
MEDIA_ROOT = LOCAL('files')
 
TEMPLATE_DIRS = (
    LOCAL('templates')
)

O que fizemos acima foi configurar o projeto para acessar nosso banco de dados no MySQL, ajustar o timezone e idioma de acordo com o Brasil, setar o MEDIA_ROOT, que é o diretório onde nossos arquivos externos serão armazenados e definir o diretório templates onde nossos arquivos HTML ficarão.
Agora vamos criar nossa aplicação.