GustavoHenrique.net » datagrid http://blog.gustavohenrique.net Tecnologia e Software Livre Mon, 05 Mar 2012 10:50:09 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jqDjangoGrid – plugin JQuery com Django para criar datagrids http://blog.gustavohenrique.net/2009/07/jqdjangogrid-plugin-jquery-django-datagrid/ http://blog.gustavohenrique.net/2009/07/jqdjangogrid-plugin-jquery-django-datagrid/#comments Fri, 24 Jul 2009 16:26:11 +0000 gustavohenrique http://www.gustavohenrique.net/brogui/?p=118 Tela do jqDjangoGrid

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:

  1. Descompacte o pacote jqdjangogrid.tar.gz;
  2. copie o diretório jqdjangogrid, que é a app em django, para o diretório do seu projeto;
  3. Copie os arquivos .js para o diretório de arquivos javascript do seu projeto (dento do MEDIA_ROOT);
  4. 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.

]]> http://blog.gustavohenrique.net/2009/07/jqdjangogrid-plugin-jquery-django-datagrid/feed/ 3