输入选择中的父、子和GrandChild关系案例

Question

如果我们使用刀片方法进行输入选择按钮，那么如何获得输入选择选项上的父和子关系。我是获得所有的数据，没有排序的选择，但我需要看到孩子下面的父母在选择和孩子应该有一个子弹或什么东西，以了解它的孩子上面的父母。

叶片

{!! 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);
}

我从中得到的选择输出是：

​

我想要的输出如下：

主页

• 主页儿童

联系人页

• Contact儿童page

• 联系人儿童页

我不知道我做错了什么，我需要做一些其他的技巧才能得到我想要的输出，如果是的话，我们能做的最好的技巧是什么？

DB结构

​

​

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>

您必须为类optionGroup和optionChild添加css，类似于下面的代码

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