&nbsp; instead of <li> in {% recursetree nodes %}

Question

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?

Answer 1

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):

html

<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>

css

.i3servicelist ul {list-style-type: none;}
.i3servicelist_element {border-bottom:1px solid #ddd;display:block;margin:0;padding: 8px;}