2

treebeard docs apiの例に従って、get_annotated_list(parent=None, max_depth=None)with parent=<my root node>を使用してツリーの annotated_list を作成しました。これをテンプレートに渡し、ドキュメントでAlexey Kinyovに帰属する例を使用して、次を使用してツリーを正常に表示できます

{% for item, info in annotated_list %}
    {% if info.open %}
        <ul><li>
    {% else %}
        </li><li>
    {% endif %}

    {{ item }}

    {% for close in info.close %}
        </li></ul>
    {% endfor %}
{% endfor %}

私が望むのは、これらのネストされたリストのドロップダウン機能を提供できるようにすることです。w3schools のこの標準的な例から借用して、annotated_listテンプレート変数で動作するように変更したところ、次のようになりました。

<ul id="myUL">
    <li><span class="caret">{{ annotated_list.0.0 }}</span>
        {% for item, info in annotated_list|slice:"1:" %}
            {% if info.open %}
                <ul class="nested"><li>
            {% else %}
                </li><li>{% if item.get_children_count > 0 %}<span class="caret">
                        {% endif %}
            {% endif %}

            {{ item }}
            {% if item.get_children_count > 0 %}</span>
                    {% endif %}

            {% for close in info.close %}
                </li></ul>
            {% endfor %}

        {% endfor %}
    </li>
</ul>

私のコードはほとんど機能しますが、一番左のノードのノードの子が表示されないようで、その理由がわかりません。

注: CSS と JS は問題に含まれていませんが、ドロップダウン メニューを機能させるために必要でした (私はその w3schools の例で使用されているすぐに使える CSS/JS を使用しています)。

4

1 に答える 1