jqDjangoGrid – plugin JQuery com Django para criar datagrids

By gustavohenrique|Django|3 Comments

CONFIGURAÇÃO AVANÇADA

Para funcionar, é obrigatório definir o nome da aplicação, nome do modelo e as colunas que serão exibidas. Uma configuração mais avançada permite especificar um filtro para os dados exibidos, o filtro utilizado pela pesquisa, o numero de linhas do datagrid, a ordem padrão de exibição e adicionar botões personalizados na barra de navegação.
A configuração é passada na forma de um dicionário, contendo chaves e valores. Abaixo uma descrição detalhada de cada chave:

appLabel
Nome da aplicação django criada pelo manage.py

modelName
Classe dentro do models.py da aplicação

cols
As colunas exibidas no datagrid. É possível definir um label e especificar a largura de cada uma. É necessário definir a exibição da coluna pk caso deseje obter o a chave primária e utilizar posteriormente para alguma função. Coluna de nome pk aparece um radio input em vez do valor.

numItensPerPage
Número de linhas (registros) exibidos no datagrid.

order
Ordem de exibição dos dados. Assim como no Django, utilize o hífen quando for ordem decrescente.

initialFilter
Filtro inicial. O valor padrão é pk>0, ou seja, todos os registros. O jqDjangoGrid permite que sejam definidos também filtros utilizando o objeto Q do Django. Ex.: ‘Q(pk>10) | Q(pk=5)’.

searchFilter
Filtro utilizado na pesquisa. Também suporta o objeto Q. Nesse filtro é necessário definir o valor como %s pois o método interno do jqDjangoGrid vai substituir %s pela string digitada no campo de texto. Ex.: ‘name__icontains=”%s”,email__icontains=”%s”‘.

buttons
Permite criar botões que vão ser exibidos na barra de navegação. Na versão atual são aceitos apenas “input buttons” ou “img”. É preciso definir o id do botão, o tipo (se é button ou image), o label (em caso de imagens, é o src da imagem) e a função javascript executada ao clicar sobre o botão.
Ex 1.: {“meubotao”: {“type”: “button”, “label”: “Teste”, “onclick”: “alert(‘Fui clicado’)”}}
Ex 2.: {“newbotao”: {“type”: “image”, “label”: “/media/images/delete.gif”, “onclick”: “alert(‘Voce me clicou’)”}}

tdExtraClick
Possibilita ao desenvolvedor especificar uma função à ser chamada ao clicar sobre um registro.

canShowGenericButtonDelete
Se o valor for true será exibido um botão para deletar registros.

Observe um exemplo mais avançado:

class Bookmark(models.Model):
    site_name = models.CharField(max_length=200)
    site_url = models.URLField(max_length=254)
    category = models.CharField(max_length=100)
    is_active = models.BooleanField()
    ...

$('#mydatagrid').datagrid({
    'appLabel': 'bookmark',
    'modelName': 'Bookmark',
    'cols': {
        "pk": {"label": "", "width":"10px"},
        "site_name": {"label": "Nome", "width": "100px"},
        "site_url": {"label": "URL", "width": "300px;"},
        "category": {"label": "Categoria", "width": "100px"},
    },
    'order': 'site_name',
    'initialFilter': 'is_active=True',
    'searchFilter': 'Q(site_name__icontains="%s")|Q(site_url__icontains="%s")',
    'canShowGenericButtonDelete': true,
});

MÉTODOS ESPECIAIS

jqDjangoGrid oferece 2 métodos para auxiliar o uso do desenvolvedor. Um retorna o valor da coluna pk do registro selecionado e o outro permite remover o registro selecionado do banco de dados, utilizando o método delete() do objeto no Django.

getDatagridSelected()

Em qualquer função javascript é possível obter a pk do registro selecionado através do método getDatagridSelected(). Ex.:

<script type="text/javascript">
function showMyPk() {
    var pk = getDatagridSelected();
    alert('Valor da PK: '+pk);
}
</script>

genericDatagridDelete()

Método que permite excluir um registro do banco de dados. Ele aproveita a configuração do model_name definido ao criar o datagrid para remover o registro. Após remover, executa um “refresh” no datagrid. Esse método não pode ser invocado manualmente. Configurando a chave “canShowGenericButtonDelete: true” é criado um botão no datagrid para excluir o registro do banco de dados. Ex.:

$('#mydatagrid').datagrid({
    'appLabel': 'bookmark',
    'modelName': 'Bookmark'
    'canShowGenericButtonDelete': true,
    'cols': {
        "pk": {"label": "", "width":"10px"},
        "site_name": {"label": "Nome", "width": "100px"},
        "site_url": {"label": "URL", "width": "300px;"},
        "category": {"label": "Categoria", "width": "100px"},
    },
});

CONSIDERAÇÕES FINAIS

Na versão atual há uma limitação de apenas 1 datagrid por página.
A troca de dados com o servidor funciona somente com o formato JSON.
Devido ao pouco tempo, nenhum teste foi realizado no internet explorer.
No momento comecei a utilizar esse datagrid em um projeto para exibição dos dados e utilizo o jquery-ui para criar janelas de cadastro e alteração dos dados. Com isso consigo desenvolver mais rápido um sistema em ajax no django. Fica a dica para quem quiser se aprofundar.

Bookmark It