如何在 laravel 8 中保存嵌套的下拉菜单答案

【问题标题】：how can I save nested dropdown menu in laravel 8如何在 laravel 8 中保存嵌套的下拉菜单
【发布时间】：2021-12-12 12:08:18
【问题描述】：

我有一个嵌套的下拉菜单，它显示来自数据库的数据，我想在选择它时获取数据的 ID，我也希望能够多选，但我不能，因为我什至无法获得对应于该特定数据的 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('App\Models\Menu', 'id', 'parent_id')->orderBy('sort_order');
    }

    public function children()
    {

        return $this->hasMany('App\Models\Menu', '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();
    }
}`

这是我的控制器 `

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MenuController extends Controller
{
    public function getMenu()
    {
        $menu = new \App\Models\Menu;
        $menuList = $menu->tree();
        return view('index')->with('menulist', $menuList);
    }
   

}

` 这是它的索引

`

<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>

这是一个子菜单

@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>

希望有人能帮帮我。

【问题讨论】：

您可以使用带有 parent_id 列（可为空）的单个表。如果 parent_id 为 null，则它是父菜单项。如果有 parent_id 它是一个子项。
已经完成了，我的问题是现在如何保存。

标签： php laravel bootstrap-4 laravel-8

【解决方案1】：

我无法为您的代码提供帮助。但我可以向您展示我是如何完成类别子类别选择框的。我的类别模型：

class Category extends Model
{
    use HasFactory;

    protected $fillable = [
        'parent_id',
        'category_name',
        'description',
        'image',
        'slug',
        'status',
    ];

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

    public function parent()
    {
        return $this->belongsTo(self::class, 'parent_id');

    }  

}

控制器：

public function create()
{
    $categories = Category::where('parent_id', 0)->orderby('category_name', 'asc')->get();
    return view('dashboards.admins.category.create', compact('categories'));
}

视图：create.blade.php

                            <div class="form-group">
                                @php $dashes = ' -- ' @endphp
                                <label>Select parent category*</label>
                                <select type="text" name="parent_id" class="form-control">
                                    <option value="0">None</option>
                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->category_name }}</option>                                         
                                        @php $newDashes = $dashes . ' -- ' @endphp                                            
                                        @foreach ($category->children as $sub)                                              
                                          @include('/dashboards/admins/category/subcategories', ['cat' => $sub, 'dashes' => $newDashes,'parent_id' => ''] )
                                        @endforeach                                       
                                    
                                    @endforeach
                                </select>
                            </div>

并将部分视图包含在 creae.blade - 命名 - subcategories.blade 中

    <option value="{{ $cat->id }}" @if($cat->id == $parent_id) " selected "   @endif >{{ $dashes }}{{  $cat->category_name}}</option>
    @php $newDashes = $dashes. ' -- ' @endphp
    @foreach ($cat->children as $sub)
      @include('/dashboards/admins/category/subcategories', ['cat' => $sub, 'dashes' => $newDashes])
    @endforeach

子类别显示在类别名称前面和主类别正下方。

【讨论】：

我正在使用与您类似的代码很好地显示和保存它，但现在我对保存数据的方式有疑问，它不是为数组值开始一个新字段，而是将它们保留在像这样的一个字段 ["4","7","9","12","18","19","20"] 但我希望他们拥有自己的字段。
多选将只返回数组中的数据。