而不是{％recursetree nodes}}中的<li> </li>

Question

我有这个工作：

<ul class="root">
    {% recursetree nodes %}
        <li>
            {{ node.name }}
            {% if not node.is_leaf_node %}
                <ul class="children">
                    {{ children }}
                </ul>
            {% endif %}
        </li>
    {% endrecursetree %}
</ul>

但是，我需要在table标记内显示树，因此我希望项目按空格缩进，而不是ul和li。

我该怎么做？

Answer 1

表的问题在于，您需要知道表将获得多少个单元格 - 因此您可以在子对象中使用colspan="x"或其他内容。所以我想这会带来比所需更多的麻烦和开销。

也许你只是在寻找一些“像桌子一样”的设计......这样的事情？

如果是这样，这里的代码是默认的bootstrap3-css和一些添加的css（标有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;}