README

处理层次结构数据可能会迅速变得复杂。幸运的是，有一些工具可以帮助。此包将3个惊人的工具结合在一起。

• a {% tree %} twig标签，用于递归显示树而无需编写twig宏。使用ApiPlatform的jstree包装器。还包括一个{% tree %} twig标签。
• 一个刺激控制器，用于调用jstreejavascript库
• 一些辅助程序，用于与ApiPlatform集成以编辑和创建树节点。

除了上述功能外，它还依赖于stof/doctrine-extensions-bundle以使doctrine实体具有层次结构。

composer req survos/tree-bundle

树标签

{% tree %}标签几乎与{% for %}标签一样工作，但在{% tree %}内部可以调用{% subtree var %}。更多详细信息请参阅tacman/tree-tag。

{% tree item in menu %}
  {% if treeloop.first %}<ul>{% endif %}
    <li>
        <a href="{{ item.url }}">{{ item.name }}</a>
        {% subtree item.children %}
    </li>
  {% if treeloop.last %}</ul>{% endif %}
{% endtree %}

symfony new tree-demo --webapp --version=next --php=8.2 && cd tree-demo
composer config minimum-stability dev
composer config extra.symfony.allow-contrib true
composer req symfony/asset-mapper:^6.4 symfony/stimulus-bundle:2.x-dev survos/tree-bundle

bin/console make:controller Tree -i
cat > templates/tree.html.twig <<END
{% extends 'base.html.twig' %}
{% block body %}
    {% set food = [
        {name: 'fruit', children: [
            {name: 'apple', children: [
                {name: 'Granny Smith'},
                {name: 'Gala'},
                {name: 'Fuji'},
            ]},
            {name: 'banana'}
        ]},
        {name: 'veggies', children: [
            {name: 'peas'},
            {name: 'carrots'},
            {name: 'beets'}
        ]},

    ] %}

    <h2>Food Tree</h2>
    {% set _sc = '@survos/tree-bundle/tree' %}
<div {{ stimulus_controller(_sc) }} {{ stimulus_target(_sc, 'html') }}>
    {% tree item in food %}
        {% if treeloop.first %}<ul>{% endif %}
        <li>
            {{ item.name }}
            {% subtree item.children|default([]) %}
        </li>
        {% if treeloop.last %}</ul>{% endif %}
    {% endtree %}
</div>
{% endblock %}

END
symfony server:start -d
symfony open:local --path=/tree

与AutoImport相关的问题

    "controllers": {
      "tree": {
        "main": "src/controllers/tree_controller.js",
        "webpackMode": "eager",
        "fetch": "lazy",
        "enabled": true,
        "autoimport": {
          "jstree/dist/themes/default/style.min.css": true
        }
      },