CakePHP 3.3 使用 SweetAlert 确认删除记录

Question

我正在使用 CakePHP 3.3，我有一个 users 列表，我想在确认取消删除特定用户之前显示一个 SweetAlert 确认框。

这是来自src/Template/Users/index.ctp 文件的 sn-p，其中包含用户列表：

<tbody>
        <?php foreach ($users as $user): ?>
        <tr>
            <td><?= $this->Html->image('../'.$user->avatar, ['class' => 'img-avatar']); ?></td>
            <td><?= h($user->username) ?></td>
            <td><?= h($user->role) ?></td>
            <td><?= h($user->created) ?></td>
            <td><?= h($user->modified) ?></td>
            <td class="actions">
                <span class="label label-default"><?= $this->Html->link(__('View'), ['action' => 'view', $user->id]) ?></span>
                <span class="label label-default"><?= $this->Html->link(__('Edit'), ['action' => 'edit', $user->id]) ?></span>
                <span class="label label-default"><?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $user->id], ['confirm' => __('Are you sure you want to delete # {0}?', $user->id)]) ?></span>
            </td>
        </tr>
        <?php endforeach; ?>
 </tbody>
 <button class="btn-del">DUMMY BUTTON</button>

然后我的src/Template/Layout/default.ctp 中有一个脚本：

<script>
    document.querySelector('.btn-del').onclick = function(){
        swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            },
            function(){
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
            });
    };
</script>

我尝试了脚本，它使用Dummy Button 工作，但我不知道如何使它工作，因此它可以确认或取消删除user 记录，并在每个之后重定向到index.ctp删除。

对不起，我是 CakePHP 和 JS 的初学者，在此先感谢您。

Answer 1

我已经通过使用以下概念解决了这个问题：

HTML

<tr class="home-loan-table">
    <td><?= $this->Html->image($image, array('class' => 'profile-user-img img-responsive img-circle', 'width' => 100, 'height' => 100, 'alt' => 'User profile picture')) ?></td>
    <td><?= $testimonial->has('FromUser') ? $testimonial->FromUser->first_name : $testimonial->name ?></td>
    <td><?= $profile ?></td>
    <td><?= $testimonial->title ?></td>
    <!--<td><?= $testimonial->has('user') ? $this->Html->link($testimonial->user->id, ['controller' => 'Users', 'action' => 'view', $testimonial->user->id]) : '' ?></td>-->
    <td>
        <div class="table-wrap-elps">
            <?= ($testimonial->description) ?>
        </div>
    </td>
    <td><?= $this->Number->format($testimonial->rating) ?></td>
    <td class="actions text-center" style="white-space:nowrap">
        <?= $this->Html->link(__('View'), ['action' => 'view', $testimonial->id], ['class' => 'view-btn']) ?>
        <?= $this->Html->link(__('Edit'), ['action' => 'edit', $testimonial->id], ['class' => 'edit-icon']) ?>
        <?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $testimonial->id], ['confirm' => __('Confirm to delete this entry?'), 'class' => 'crose-btn hide-postlink']) ?>
        <a href="javascript:;" class="crose-btn postlink-delete">Delete</a>
    </td>
</tr>

CSS

<style>
.hide-postlink{
    display: none;
}
.postlink-delete{
    display: inline-block;
}

脚本

<script>
$(document).on('click', '.postlink-delete', function () {
    var delete_form = $(this).parent().find('form');
    //add sweetalert here then form submit
    delete_form.submit();
});

Answer 2

index.ctp

<?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $testimonial->id], ['class'=>'your_class','confirm' => __('Confirm to delete this entry?')]) ?>

脚本

$(".your_class").attr("onclick", "").unbind("click"); //remove function onclick button

$(document).on('click', '.your_class', function () {
    let delete_form = $(this).parent().find('form');
    swal({
        title: "Você tem certeza?",
        text: "Uma vez excluído, você não poderá mais recuperar!",
        icon: "warning",
        buttons: true,
    }).then((willDelete) => {
            if (willDelete) {
                delete_form.submit();
            }
        });
});