Reputation: 3138
I have this working:
<ul class="root">
{% recursetree nodes %}
<li>
{{ node.name }}
{% if not node.is_leaf_node %}
<ul class="children">
{{ children }}
</ul>
{% endif %}
</li>
{% endrecursetree %}
</ul>
However, I need to display the tree inside a table
tag so I want the items to be indented by spaces, not ul
and li
.
How can I do that?
Upvotes: 1
Views: 310
Reputation: 9917
The problem with a table will be, that you need to know how many cells the table will get - so you could use colspan="x"
or something else within your child objects. So I guess that'll bring more trouble and overhead than needed.
Maybe you are only looking for some "table like" design...something like this?
If so, here's the code with default bootstrap3-css and some added css (tagged with i3
):
<ul class="i3servicelist list-unstyled">
{% recursetree service_items %}
<li>
<span class="i3servicelist_element">
<span rel="tooltip" data-placement="left" data-html="true" title="{{ node.tooltip|safe }}">
{{ node.name }}
</span>
{% include 'service/_service_options.html' %}
</span>
{% if not node.is_leaf_node %}
<ul>
{{ children }}
</ul>
{% endif %}
</li>
{% endrecursetree %}
</ul>
.i3servicelist ul {list-style-type: none;}
.i3servicelist_element {border-bottom:1px solid #ddd;display:block;margin:0;padding: 8px;}
Upvotes: 3