如何在多选中添加“全选”功能| laravel |Voyager

开始学习Laravel和Voyager，我有一个'users'表，其中'belongs to many'与'department'表有关系。创建用户时，有一个多选下拉菜单，用于保存用户所属的部门。Voyager会使用其默认表单字段自动处理添加和编辑操作。我想添加一个按钮，选择所有的选项，在多选择用户创建形式。
这就是我被卡住的地方，我该怎么做。
用户创建表单

<label for="department">{{ __('Department') }}</label>
                                    @php
                                        
                                        $row = $dataTypeRows->where('field', 'user_belongsto_department_relationship')->first();
                                        $options = $row->details;
                                    @endphp
                                    @include('voyager::formfields.relationship')
                                </div>

字符串
在Voyager中处理多项选择的FormField：

@elseif($options->type == 'belongsToMany')
            @if (isset($view) && ($view == 'browse' || $view == 'read'))

                @php
                    $relationshipData = isset($data) ? $data : $dataTypeContent;
                    
                    $selected_values = isset($relationshipData)
                        ? $relationshipData
                            ->belongsToMany($options->model, $options->pivot_table, $options->foreign_pivot_key ?? null, $options->related_pivot_key ?? null, $options->parent_key ?? null, $options->key)
                            ->get()
                            ->map(function ($item, $key) use ($options) {
                                return $item->{$options->label};
                            })
                            ->all()
                        : [];
                @endphp

                @if ($view == 'browse')
                    @php
                        $string_values = implode(', ', $selected_values);
                        if (mb_strlen($string_values) > 25) {
                            $string_values = mb_substr($string_values, 0, 25) . '...';
                        }
                    @endphp
                    @if (empty($selected_values))
                        <p>{{ __('voyager::generic.no_results') }}</p>
                    @else
                        <p>{{ $string_values }}</p>
                    @endif
                @else
                    @if (empty($selected_values))
                        <p>{{ __('voyager::generic.no_results') }}</p>
                    @else
                        <ul>
                            @foreach ($selected_values as $selected_value)
                                <li>{{ $selected_value }}</li>
                            @endforeach
                        </ul>
                    @endif
                @endif
            @else 
                <select id={{ $relationshipField }}
                    class="form-control select2-ajax @if (isset($options->taggable) && $options->taggable === 'on') taggable @endif"
                    name="{{ $relationshipField }}[]" multiple
                    data-get-items-route="{{ route('voyager.' . $dataType->slug . '.relation') }}"
                    data-get-items-field="{{ $row->field }}"
                    @if (!is_null($dataTypeContent->getKey()))
                        data-id="{{ $dataTypeContent->getKey() }}"
                    @endif
                    data-method="{{ !is_null($dataTypeContent->getKey()) ? 'edit' : 'add' }}"
                    @if (isset($options->taggable) && $options->taggable === 'on') data-route="{{ route('voyager.' . \Illuminate\Support\Str::slug($options->table) . '.store') }}"
                        data-label="{{ $options->label }}"
                        data-error-message="{{ __('voyager::bread.error_tagging') }}" @endif
                    @if ($row->required == 1) required @endif>

                    @php
                        $selected_keys = [];
                        
                        if (!is_null($dataTypeContent->getKey())) {
                            $selected_keys = $dataTypeContent->belongsToMany($options->model, $options->pivot_table, $options->foreign_pivot_key ?? null, $options->related_pivot_key ?? null, $options->parent_key ?? null, $options->key)->pluck($options->table . '.' . $options->key);
                        }
                        $selected_keys = old($relationshipField, $selected_keys);
                        $selected_values = app($options->model)
                            ->whereIn($options->key, $selected_keys)
                            ->pluck($options->label, $options->key);
                    @endphp

                    @if (!$row->required)
                        <option value="">{{ __('voyager::generic.none') }}</option>
                    @endif

                    @foreach ($selected_values as $key => $value)
                        <option value="{{ $key }}" selected="selected">"{{ $value }}"</option>
                    @endforeach

                </select>

            @endif

        @endif

型

如果由于用户属于多个部门而需要选择更多选项，则可以执行以下操作

function selectAllOptions(){
        document.querySelectorAll('#departments option').forEach(option =>{
            option.selected = true
        })
    }

个字符
在您情况下，您将像锯子一样执行此操作

FormField that handles the Multi Select in Voyager:
  
<select name="departments" id="departments" multiple>
@foreach
<option value="{{$key}}">{{$value}}</option>
@endforeach
</select>
<button onclick="selectAllOptions()">select all</button>

<script>
function selectAllOptions(){
document.querySelectorAll('#departments option').forEach(option =>{
    option.selected= true
})
}
</script>

型
你可以用不同的方法来实现同样的功能，比如使用jquery，我希望能正确理解你的问题：）

如何在多选中添加“全选”功能| laravel |Voyager - v1.6.0

1条答案

相关问题

热门标签

最新问答