（Laravel）删除按钮上的确认模式

Question

我有一个视图，它显示数据库中的用户表，最后一列上有删除按钮，目前对我来说工作正常，但我想显示确认模型，当用户单击删除按钮时，它将删除选定用途

这是删除按钮的当前代码，可以正常工作：

<a href="{{ route('deleteUser', ['user_id' => $user->id]) }}"><button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-trash3"></i></button></a>

现在我使用了这个模式，我必须点击删除按钮才能删除选定的用户

<div class="modal fade text-xs-left" id="iconModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure that you want to <strong>Delete</strong> this user ?</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-primary">Delete</button>
            </div>
        </div>
    </

Answer 1

您不需要为每个用户生成一个模式。只需构建一个模态并为动态部件使用数据属性。

因此，尽可能为每个按钮使用 data- 属性，例如 data-user-id="{{ }}" 用于表单操作：

<a href="#" class="btn mr-0 mb-0 btn-outline-primary btn-sm" data-toggle="modal" data-target="#deleteUserConfirmation" data-user-id="{{ $user->id }}"><i class="icon-trash3"></i></a>

在模态窗口中使用带有删除方法的表单：

<form id="deleteUserForm" method="POST">
{{ method_field("DELETE") }}
<button class="btn btn-danger" type="submit">DELETE</button>
</form>

在脚本中使用：

<script>
  $('#deleteUserForm').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  $('#deleteUserForm').attr('action', '/user/' + button.data('user-id'));
});
</script>

在路线使用中：

Route::delete('/user/{user}', 'UserController@destroy');

附：您还可以使用动态使用的其他数据属性，例如data-user-name="{{ }}" 显示用户名将被删除。

Answer 2

好的，我已经使用下面的这种方法来使其工作，但这需要为每个删除按钮制作一个模式，所以我认为这不是一个好的解决方案，后端可能有超过 1k 用户甚至 200k 用户所以我希望它在循环外的模态下工作？

@foreach ($users as $user)
<tr>
    <th scope="row">{{ $loop->index + 1 }}</th>
    <td>{{ $user->fullname }}</td>
    <td>{{ $user->username }}</td>
    <td>{{ $user->email }}</td>
    <td>
        @foreach( $roles as $role ) {{ $user->role_id == $role->id ? $role->name : ''}} @endforeach
    </td>
    <td>
        <a href="{{ route('dUseInfo', [$user->id]) }}">
            <button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-settings2"></i></button>
        </a>
        <button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm" data-toggle="modal" data-target="#iconModal-{{ $user->id }}"><i class="icon-trash3"></i></button>

        <!-- Modal -->
        <div class="modal fade text-xs-left" id="iconModal-{{ $user->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure that you want to <strong>Delete</strong> this user ?</p>

                    </div>
                    <div class="modal-footer">
                        {!! Form::open(['route' => ['deleteUser', $user->id], 'class' => 'delete', 'method' => 'DELETE']) !!}
                        <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-primary">Delete</button>

                        {!! Form::close() !!}

                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>
@endforeach