Parent、Child & GrandChild 输入关系案例 Select

Question

如果我们对输入 select 按钮使用 blade 方法，我们如何在输入 select 选项上获得 parent 和 child 关系。我得到的所有数据都没有按 select 排序，但我需要在 select 中看到 parent 下面的 child 并且 child 应该有子弹或其他东西了解它的 child 以上 parent.

Blade

{!! Form::select('parent_id',$categories,old('parent_id'),[
    'placeholder' => trans('test.parent_id'),
    'class' => 'form-control',
]) !!}

控制器：

$data=[
    'categories' => Category::with('children')->pluck('category','id'),
];
return view('backend.categories.modals.create', $data);

型号

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

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

public function scopeActive($query) {
    return $query->where('active',1);
}

我得到的 select 输出是：

我想要的输出如下：

首页

首页child

联系页面

联系child页面
联系childs child页面

我不知道我哪里出错了，我是否必须做一些其他的技巧来获得我想要的输出，如果是的话，我们可以做的最好的技巧是什么？

数据库结构

Answer 1

您可以将 optgroup 与普通 html 一起使用以显示组中的选项

<select>
   @foreach($categories as $category)
        <optgroup>
            <option value="{{ $category->id }}">{{ $category->category }}</option>
                @foreach($category->children as $child)
                    <option value="{{ $child->id }}">{{ $child->category }}</option>

                    @foreach($child->children as $kid)
                        <option value="{{ $kid->id }}">{{ $kid->category }}</option>
                    @endforeach
                @endforeach
        </optgroup
    @endforeach
</select>

并且您需要删除 pluck 并写入

$data=[
    'categories' => Category::has('children')
        ->orWhere('parent_id', 0)    //Get only the parents
        ->with(['children' => function($query){
            $query->doesntHave('children');
        }])
        ->select('category','id')
        ->get(),
];
return view('backend.categories.modals.create', $data);

Answer 2

首先，您必须更改查询以仅获取父类别。

$categories=Category::active()->get()->groupBy('parent_id');
$data=[
    'categories' => $categories,
    'rootCategories'=>data_get($categories,0)

];

在视图中

<select name='parent_id' class="form-control">
     <option value="">{{ trans('test.parent_id') }}</option>
     @foreach($rootCategories as $rootCategory)
                                            
          <option value="{{ $rootCategory->id }}" {{old('parent_id')==$rootCategory->id?'selected':''}} class="optionGroup">{{ $category->category }}</option>
               @if(data_get($categories,$rootCategory-id))
                    @foreach(data_get($categories,$rootCategory-id) as $children)
                         <option class="{{data_get($categories,$children-id)?'optionGroup':'optionChild'}}" value="{{ $children->id }}" {{old('parent_id')==$children->id?'selected':''}}>{{ $children->category }}</option>
                         @if(data_get($categories,$children-id))
                               @foreach(data_get($categories,$children-id) as $children)
                                   <option class="{{data_get($categories,$children-id)?'optionGroup':'optionChild'}}" value="{{ $children->id }}" {{old('parent_id')==$children->id?'selected':''}}>{{ $children->category }}</option>
                                   @if(data_get($categories,$children-id))
                                         @foreach(data_get($categories,$children-id) as $children)
                                             <option class="{{data_get($categories,$children-id)?'optionGroup':'optionChild'}}" value="{{ $children->id }}" {{old('parent_id')==$children->id?'selected':''}}>{{ $children->category }}</option>
                                             @if(data_get($categories,$children-id))
                                               //here we are a recursion you have to make a blade to handle recursion and call it self if item has childern 
                                             @endif
                                          @endforeach
                                   @endif
                               @endforeach
                         @endif
                    @endforeach
              @endif
    @endforeach
</select>

您必须为 class optionGroup 和 optionChild 添加 css 类似于此代码

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 1rem;
}

Parent、Child & GrandChild 输入关系案例 Select

Parent, Child & GrandChild Relationships case on Input Select

laravel

laravel-blade

laravel-8