Yii2 菜单小部件 - 如何为 yii2 菜单小部件设置数据子菜单标题答案

【问题标题】：Yii2 Menu widget - how to set data-submenu-title for yii2 menu widgetYii2 菜单小部件 - 如何为 yii2 菜单小部件设置数据子菜单标题
【发布时间】：2020-12-04 06:47:45
【问题描述】：

我目前有一个包含以下项目的菜单小部件，这是项目#1


 $menuIteams[] = [

                                'label'    => 'Vouchers',
                                'url'      => '#',
                                'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
                        {label}
                        <span class="d-block font-weight-normal opacity-50"></span> </a>',
                                'items'    => [
                                    ['label' => 'View All', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
                                    ['label' => 'Create New', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
                                ],
                                'options'  => [
                                    'class'              => 'nav-item nav-item-submenu',
                                    'data-submenu-title' => 'Layouts',
                                ],

                            ];

并将所有项目附加到菜单小部件

echo \yii\widgets\Menu::widget([
                        'options'         => [
                            'class'         => 'nav nav-sidebar',
                            'data-nav-type' => 'accordion',
                        ],
                        'items'           => $menuIteams,
                        'itemOptions'     => array('class' => 'nav-item'),
                        'submenuTemplate' => "\n<ul class='nav nav-group-sub'>\n{items}\n</ul>\n",
                        'encodeLabels'    => false, //allows you to use html in labels
                        'activateParents' => false,
                    ]);

我希望我的 menuIteams[] {label} 出现在每个相应的子菜单项的顶部

因此对于上面的示例，优惠券将出现在子菜单的顶部，然后是项目列表

用图片更好地解释

这个和这个相似

当然，侧边栏应该折叠起来，子菜单应该显示为类似于图片#1的下拉菜单

Html 渲染

<li class="nav-item nav-item-submenu" data-submenu-title="Layouts"><a href="#" class="nav-link"><i class="fas fa-print"></i> <span>
                        Print Digital
                        <span class="d-block font-weight-normal opacity-50"></span> </a>
<ul class='nav nav-group-sub' data-submenu-title=<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>
</ul>
</li>

预期

<li class="nav-item nav-item-submenu nav-item-open">
                            <a href="#" class="nav-link"><i class="icon-color-sampler"></i> <span>Themes</span></a>

                            <ul class="nav nav-group-sub" data-submenu-title="Themes" style="display: block;">
                                <li class="nav-item"><a href="index.html" class="nav-link active">Default</a></li>
                                <li class="nav-item"><a href="../../../LTR/material/full/index.html" class="nav-link">Material</a></li>
                                <li class="nav-item"><a href="../../../LTR/dark/full/index.html" class="nav-link">Dark</a></li>
                                <li class="nav-item"><a href="../../../LTR/clean/full/index.html" class="nav-link disabled">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
                            </ul>
                        </li>

【问题讨论】：

第一层是你的图标。第二级必须是“Vouchers”，“View All”和“Create New”必须在您的第三级。您是否有可折叠的下拉菜单脚本？找到它，然后将您的课程设置为“优惠券”<li> 和“优惠券”的子菜单
我没有关注你，是的，有一个用于折叠侧边栏的 sidebar-xs 类。
显示从菜单小部件生成的 html。这是你所期望的吗？您想在生成的 html 中更改什么？
我希望它类似于屏幕截图 #1，但顶部有优惠券标签
你有没有想要实现的脚本？显示您期望的 html 结构（html 代码/脚本）并显示从菜单小部件生成的 html？让我们比较一下，看看你的错误在哪里。

标签： yii2 yii2-widget

【解决方案1】：

从How to fetch data from database and set as submenus in yii2?想出来

必须将子菜单模板从菜单小部件移动到 $menuIteams[]

$menuIteams[] = [

                        'label'    => 'Cash Requisition',
                        'submenuTemplate' => "\n<ul class='nav nav-group-sub' data-submenu-title='Cash Requisition'>\n{items}\n</ul>\n",
                        'url'      => '#',
                        'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
                        {label}
                        <span class="d-block font-weight-normal opacity-50"></span> </a>',
                        'items'    => [
                            ['label' => 'View All Cash Requisitions', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
                            ['label' => 'Create New Cash Requisition', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
                        ],
                        'options'  => [
                            'class'              => 'nav-item nav-item-submenu',
                        ],

                    ];

【讨论】：