JSTree com Django

Jstree é uma biblioteca javascript, que cria uma árvore de navegação ou visualização semelhante a do windows explorer. Nesse tutorial irei mostrar com criar uma árvore integrada com uma aplicação utilizando o framework Django, ajax, json e além disso no código fonte do exemplo mostra como usar layouts css com django.

Primeiro passo é adicionar as bibliotecas JQuery e JSTree na página.

Inserir uma função JavaScript e uma div no corpo da página, nesse caso chamei a div de tree.

Após criar uma função dentro do arquivo views.py, que irá converter o modelo Estado em um objeto json no formato exigido pela biblioteca jstree.

def jstreeJson(request):
    estados = Estado.objects.all()
    treeJson = []
    for e in estados:
        cidades = e.cidades.all()
        cids = []
        for c in cidades:
            cids.append( {'data' : str(c.nome) , "attr" :{  "id" :  str(c.nome) }})
        treeJson.append({'data' : str(e.nomeEstado), 'children' : cids,
                          })
    json = simplejson.dumps(treeJson)
    return HttpResponse(json,mimetype="application/json")

E por último adicionar a url dentro do arquivo urls.py

(r'^ajax/jstreeJson', 'jstreeExample.jstree.views.jstreeJson'),

OK. Está criada a árvore a qual fica da seguinte forma:

Para mais detalhes consulte o código fonte.

Referências:
http://www.jstree.com/documentation/json_data
Código Fonte: http://github.com/petryx/petryx.blogrs.com.br