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.