How can I render a tree structure (recursive) using a django template?
Question
I have a tree structure in memory that I would like to render in HTML using a Django template.
class Node():
name = "node name"
children = []
There will be some object root
that is a Node
, and children
is a list of Node
s. root
will be passed in the content of the template.
I have found this one discussion of how this might be achieved, but the poster suggests this might not be good in a production environment.
Does anybody know of a better way?
Solution
I think the canonical answer is: "Don't".
What you should probably do instead is unravel the thing in your view code, so it's just a matter of iterating over (in|de)dents in the template. I think I'd do it by appending indents and dedents to a list while recursing through the tree and then sending that "travelogue" list to the template. (the template would then insert <li>
and </li>
from that list, creating the recursive structure with "understanding" it.)
I'm also pretty sure recursively including template files is really a wrong way to do it...
OTHER TIPS
Using with
template tag, I could do tree/recursive list.
Sample code:
main template: assuming 'all_root_elems' is list of one or more root of tree
<ul>
{%for node in all_root_elems %}
{%include "tree_view_template.html" %}
{%endfor%}
</ul>
tree_view_template.html renders the nested ul
, li
and uses node
template variable as below:
<li> {{node.name}}
{%if node.has_childs %}
<ul>
{%for ch in node.all_childs %}
{%with node=ch template_name="tree_view_template.html" %}
{%include template_name%}
{%endwith%}
{%endfor%}
</ul>
{%endif%}
</li>
this might be way more than you need, but there is a django module called 'mptt' - this stores a hierarchical tree structure in an sql database, and includes templates for display in the view code. you might be able to find something useful there.
here's the link : django-mptt
I'm too late) All of you use so much unnecessary with tags, this is how i do recuesive:
in main template:
<!-- lets say that menu_list is already defined -->
<ul>
{% include "menu.html" %}
</ul>
then in menu.html:
{% for menu in menu_list %}
<li>
{{ menu.name }}
{% if menu.submenus|length %}
<ul>
{% include "menu.html" with menu_list=menu.submenus %}
</ul>
{% endif %}
</li>
{% endfor %}
Yes, you can do it. It's a little trick, passing the filename to {% include %} as a variable:
{% with template_name="file/to_include.html" %}
{% include template_name %}
{% endwith %}
Django has a built in template helper for this exact scenario:
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#unordered-list
I had the same problem and I wrote a template tag. I know there are other tags like this out there but I needed to learn to make custom tags anyway :) I think it turned out pretty well.
Read the docstring for usage instructions.
Does no one like dicts ? I might be missing something here but it would seem the most natural way to setup menus. Using keys as entries and values as links pop it in a DIV/NAV and away you go !
From your base
# Base.html
<nav>
{% with dict=contents template="treedict.html" %}
{% include template %}
{% endwith %}
<nav>
call this
# TreeDict.html
<ul>
{% for key,val in dict.items %}
{% if val.items %}
<li>{{ key }}</li>
{%with dict=val template="treedict.html" %}
{%include template%}
{%endwith%}
{% else %}
<li><a href="{{ val }}">{{ key }}</a></li>
{% endif %}
{% endfor %}
</ul>
It haven't tried the default or the ordered yet perhaps you have ?
correct this:
root_comment.html
{% extends 'students/base.html' %}
{% load i18n %}
{% load static from staticfiles %}
{% block content %}
<ul>
{% for comment in comments %}
{% if not comment.parent %} ## add this ligic
{% include "comment/tree_comment.html" %}
{% endif %}
{% endfor %}
</ul>
{% endblock %}
tree_comment.html
<li>{{ comment.text }}
{%if comment.children %}
<ul>
{% for ch in comment.children.get_queryset %} # related_name in model
{% with comment=ch template_name="comment/tree_comment.html" %}
{% include template_name %}
{% endwith %}
{% endfor %}
</ul>
{% endif %}
</li>
for example - model:
from django.db import models
from django.contrib.auth.models import User
from django.utils.translation import ugettext_lazy as _
# Create your models here.
class Comment(models.Model):
class Meta(object):
verbose_name = _('Comment')
verbose_name_plural = _('Comments')
parent = models.ForeignKey(
'self',
on_delete=models.CASCADE,
parent_link=True,
related_name='children',
null=True,
blank=True)
text = models.TextField(
max_length=2000,
help_text=_('Please, your Comment'),
verbose_name=_('Comment'),
blank=True)
public_date = models.DateTimeField(
auto_now_add=True)
correct_date = models.DateTimeField(
auto_now=True)
author = models.ForeignKey(User)
I had a similar issue, however I had first implemented the solution using JavaScript, and just afterwards considered how I would have done the same thing in django templates.
I used the serializer utility to turn a list off models into json, and used the json data as a basis for my hierarchy.