Laravel 8 实现嵌套下拉菜单并获取选中ID

laravel 8 实现嵌套下拉菜单并获取选中id

本文将指导你如何在 Laravel 8 中实现一个嵌套下拉菜单，并获取用户选择的选项的ID。我们将通过模型关联和递归视图来实现动态生成下拉菜单，并提供获取选中ID的思路，以便于后续的数据处理和多选功能的实现。

模型准备

首先，我们需要一个能够表示层级关系的Model。以下是一个Menu模型的示例，它使用了parent_id来建立父子关系：

<?php

namespace App/Models;

use Illuminate/Database/Eloquent/Factories/HasFactory;
use Illuminate/Database/Eloquent/Model;

class Menu extends Model
{
    use HasFactory;

    protected $fillable = ['functional_area','parent_id'];

    public function parent()
    {
        return $this->hasOne(Menu::class, 'id', 'parent_id')->orderBy('sort_order');
    }

    public function children()
    {
        return $this->hasMany(Menu::class, 'parent_id', 'id')->orderBy('sort_order');
    }

    public static function tree()
    {
        return static::with(implode('.', array_fill(0, 100, 'children')))->where('parent_id', '=', '0')->orderBy('sort_order')->get();
    }
}
登录后复制

关键点：

  • parent_id: 用于指定父级菜单的ID。
  • parent(): 定义一个关联到父级菜单的关系。
  • children(): 定义一个关联到子菜单的关系。
  • tree(): 获取所有顶级菜单及其子菜单的静态方法。 implode(‘.’, array_fill(0, 100, ‘children’)) 保证了无限极的子菜单都被加载，但实际应用中需要考虑性能，限制层级深度。

控制器逻辑

接下来，在控制器中获取菜单数据并传递给视图：

<?php

namespace App/Http/Controllers;

use App/Models/Menu;
use Illuminate/Http/Request;

class MenuController extends Controller
{
    public function getMenu()
    {
        $menuList = Menu::tree();
        return view('index')->with('menulist', $menuList);
    }
}
登录后复制

Menu::tree() 方法用于获取所有顶级菜单及其子菜单，并将其传递给名为 index 的视图。

视图实现：递归渲染菜单

视图部分使用递归的方式来渲染嵌套的下拉菜单。首先创建index.blade.php，该文件包含基本的HTML结构和Bootstrap样式。

<body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <style>
        .dropdown-menu .nav-item a { color: #000 !important; }
        .dropdown-toggle:after { content: none; }
        .dropdown-menu .dropdown-menu { margin-left: 0; margin-right: 0; }
        .dropdown-menu li { position: relative }
        .nav-item .submenu { display: none; position: absolute; left: 100%; top: -7px; }
        .dropdown-menu>li:hover { background-color: #f1f1f1; }
        .dropdown-menu>li:hover>.submenu { display: block; }
    </style>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand"></a>
        <ul class="navbar-nav mr-auto">
            @each('submenu', $menulist, 'menu', 'empty')

        </ul>
    </nav>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">

        $(document).on('click', '.dropdown-menu', ($event) => $event.stopPropagation());
        if ($(window).width() < 992) {
            $('.dropdown-menu a').click(($event) => {
                $event.preventDefault();
                if ($(this).next('.submenu').length) {
                    $(this).next('.submenu').toggle();
                }
                $('.dropdown').on('hide.bs.dropdown', () => $(this).find('.submenu').hide());
            });
        }

    </script>
</body>
登录后复制

然后，创建submenu.blade.php，用于递归渲染菜单项：

@if ((count($menu->children) > 0) AND ($menu->parent_id > 0))
<li class="nav-item dropdown">
    <a href="" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">
        {{ $menu->functional_area }}
        @if(count($menu->children) > 0)
        <i class="fa fa-caret-right"></i>
        @endif
    </a>
    @else
<li class="nav-item @if($menu->parent_id === 0 && count($menu->children) > 0) dropdown @endif">
    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">
        {{ $menu->functional_area }}
        @if(count($menu->children) > 0)
            <i class="fa fa-caret-down"></i>
        @endif
    </a>
    @endif
    @if (count($menu->children) > 0)
    <ul class="@if($menu->parent_id !== 0 && (count($menu->children) > 0)) submenu @endif dropdown-menu" aria-labelledby="dropdownBtn">
        @foreach($menu->children as $menu)
        @include('submenu', $menu)
        @endforeach
    </ul>
    @endif
</li>
登录后复制

关键点：

  • 使用 @include(‘submenu’, $menu) 递归调用自身，渲染子菜单。
  • 根据菜单是否有子菜单，动态添加 dropdown 类，以启用 Bootstrap 的下拉菜单功能。
  • $menu->functional_area 显示菜单的名称。
  • 需要注意的是，这里的href=””只是占位符，需要修改为实际的链接。

获取选中ID

目前的代码只是展示了如何生成嵌套下拉菜单。要获取用户选择的菜单项的ID，需要进行以下修改：

  1. 修改链接： 将 submenu.blade.php 中的 标签的 href 属性修改为包含菜单ID的链接，例如：

    <a href="{{ route('menu.select', ['id' => $menu->id]) }}" class="nav-link">
    {{ $menu->functional_area }}
</a>
    登录后复制

  2. 定义路由： 在 routes/web.php 中定义一个路由来处理菜单选择：

    Route::get('/menu/select/{id}', [MenuController::class, 'select'])->name('menu.select');
    登录后复制

  3. 控制器方法： 在 MenuController 中创建一个 select 方法来处理选择的菜单ID：

    public function select($id)
{
    // 在这里处理选中的菜单ID
    dd($id); // 示例：打印选中的ID

    // 可以将ID存储在Session中，或者进行其他操作
    // return redirect()->back();
}
    登录后复制

实现多选

要实现多选功能，可以考虑以下方案：

  1. 使用复选框： 将下拉菜单中的链接改为复选框，用户可以选择多个菜单项。
  2. 使用JavaScript： 在用户点击菜单项时，使用 JavaScript 将选中的菜单ID添加到一个数组中。
  3. 提交表单： 将选中的菜单ID数组通过表单提交到服务器。

注意事项

  • 性能问题： 递归渲染深度嵌套的菜单可能会影响性能。可以考虑使用缓存或分页来优化。
  • 安全性： 确保对用户输入进行验证和转义，以防止跨站脚本攻击（XSS）。
  • 用户体验： 考虑使用户能够方便地浏览和选择菜单项。可以使用搜索、过滤等功能来提高用户体验。
  • 样式定制： 根据项目需求，自定义下拉菜单的样式。

总结

本文介绍了如何在 Laravel 8 中实现嵌套下拉菜单，并获取用户选择的菜单项的ID。通过模型关联和递归视图，可以动态生成下拉菜单。要实现多选功能，可以使用复选框或 JavaScript。在实际应用中，需要注意性能、安全性和用户体验等问题。 可以根据实际需求进行修改和优化，以满足项目的特定要求。

以上就是Laravel 8 实现嵌套下拉菜单并获取选中ID的详细内容，更多请关注php中文网其它相关文章！

https://www.php.cn/faq/1458683.html

发表回复

Your email address will not be published. Required fields are marked *