如何在一个Menu :: widget中添加多个Yii2子菜单模板？

Question

我正在基于yii2和learn-plus仪表板主题创建一个Web应用程序，可折叠的侧边栏导航菜单已实现，其ID用作目标链接（#menu_id），当单击父链接时该菜单打开，现在我尝试添加带有多个submenuTemplate的Yii2 Menu :: widget，以便我可以容纳这些ID，因为每个子菜单都应该有自己的ID。

我已经创建了菜单，并且它与单个可折叠菜单完美配合，当我添加菜单的多个可折叠部分时出现了问题。

<?php
use yii\widgets\Menu;
use yii\helpers\Html;


/**
 * Created by PhpStorm.
 * User: Mr Daud Mabena
 * Date: 01/05/19
 * Time: 01:34 PM
 */

echo Menu::widget([
    'activeCssClass' => "active",
    'activateParents' => true,
    'encodeLabels' => false,
    'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",
    'options' => ['class' => 'sidebar-menu'],
    'items' => [
        [
            'label' => 'Security Dashboard',
            'url' => ['/security/'],
            'options' => ['class' => 'sidebar-menu-item'],
            'template' => "<a class='sidebar-menu-button' href='{url}'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>
                {label}
            </a>",
        ],
        [
            'id' => 'components_menu',
            'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu'>
                <i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>
                List of Users
                <span class='ml-auto sidebar-menu-toggle-icon'></span>
            </a>",
            'items' => [
                [
                    'label' => 'Staffs',
                    'url' => ['/security/users/staffs'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Applicant',
                    'url' => ['/security/users/applicants'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
                [
                    'label' => 'Students',
                    'url' => ['/security/users/students'],
                    'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                    'options' => ['class' => 'sidebar-menu-item'],
                ],
            ]
        ],
        [
            "label" => "Add New Staff",
            "url" => ["/security/users/create"],
            "template" => "<a class='sidebar-menu-button' href='{url}'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
        ],
        [
            "label" => "Logout",
            "url" => ["/admission/applicants/reports"],
            "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
        ],
    ],
]);

我需要多个

'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu'>\n{items}\n</ul>\n",

具有不同的ID，第一个是setup_menu，希望添加其他ID，例如access_levels等

Answer 1

将submenuTemplate移到要显示子菜单的父项内，当前，所有子菜单都使用一个模板，而每个子菜单都需要使用单独的模板，并分配不同的模板所有子菜单有id个，父项有href个。

例如，请参见下图，其中在List of Users 2个级别下具有多级可折叠子菜单，在Add New Staff 1个级别下具有其他可折叠子菜单。

您可以使用以下代码，我将项目复制到了现有子菜单下，因此您可以进行相应的更改，但是想法就在那里。我使用setup_menu_1格式为菜单分配了3个不同的ID，也对其进行了更改

echo Menu::widget(
    [
        'activeCssClass' => "active",
        'activateParents' => true,
        'encodeLabels' => false,
        'options' => ['class' => 'sidebar-menu'],
        'items' => [
            [
                'label' => 'Security Dashboard',
                'url' => ['/security/'],
                'options' => ['class' => 'sidebar-menu-item'],
                'template' => "<a class='sidebar-menu-button' href='{url}'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>bar_chart</i>{label}</a>",
            ],
            [
                'id' => 'components_menu',
                'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_1'><i class='sidebar-menu-icon sidebar-menu-icon--left material-icons'>tune</i>List of Users<span class='ml-auto sidebar-menu-toggle-icon'></span></a>",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_1'>\n{items}\n</ul>\n",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'template' => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_3'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                        'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_3'>\n{items}\n</ul>\n",
                        'items' => [
                            [
                                'label' => 'Staffs',
                                'url' => ['/security/users/staffs'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Applicant',
                                'url' => ['/security/users/applicants'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                            [
                                'label' => 'Students',
                                'url' => ['/security/users/students'],
                                'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                                'options' => ['class' => 'sidebar-menu-item'],
                            ],
                        ]
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Some Other Menu",
                'submenuTemplate' => "\n<ul class='sidebar-submenu sm-indent collapse' id='setup_menu_2'>\n{items}\n</ul>\n",
                "template" => "<a class='sidebar-menu-button sidebar-js-collapse' data-toggle='collapse' href='#setup_menu_2'><i class='fa fa-bar-chart' aria-hidden='true'></i> {label}</a>",
                'items' => [
                    [
                        'label' => 'Staffs',
                        'url' => ['/security/users/staffs'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Applicant',
                        'url' => ['/security/users/applicants'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                    [
                        'label' => 'Students',
                        'url' => ['/security/users/students'],
                        'template' => "<a class='sidebar-menu-button' href='{url}'><span class=\"sidebar-menu-text\">{label}</span></a>",
                        'options' => ['class' => 'sidebar-menu-item'],
                    ],
                ]
            ],
            [
                "label" => "Logout",
                "url" => ["/admission/applicants/reports"],
                "template" => Html::beginForm(['/security/users/logout'], 'post') . Html::submitButton('Logout', ['class' => 'sidebar-menu-button logout']) . Html::endForm(),
            ],
        ],
    ]
);