在CodeIgniter 3中如何使用SweetAlert2添加删除确认对话框？

请先确保你已经在项目中本地部署并引入了SweetAlert2的CSS和JS资源。

1. 调整视图层删除按钮 #

取消原a标签的默认跳转行为，新增自定义属性存储删除地址，修改后代码如下：

<td>
  <a href="javascript:void(0)"
     class="btn btn-danger btn-sm delete-btn"
     data-delurl="<?php echo base_url('index.php/admin/deletestaff/' . $row->StaffUserName) ?>">
    Delete
  </a>
</td>

2. 添加SweetAlert2触发逻辑 #

在视图页面底部（确保DOM加载完成后执行）添加如下JS代码：

// 监听所有删除按钮的点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const delUrl = this.getAttribute('data-delurl');
    // 弹出确认对话框
    Swal.fire({
      title: '确认删除？',
      text: "删除后数据无法恢复，请谨慎操作！",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: '确认删除',
      cancelButtonText: '取消'
    }).then((result) => {
      // 用户确认删除后再执行跳转
      if (result.isConfirmed) {
        window.location.href = delUrl;
      }
    })
  })
})

以上改动无需修改原有控制器、模型层代码即可正常运行。

可选优化：实现AJAX无刷新删除 #

如果需要避免页面跳转刷新，可按如下代码调整逻辑：

调整后的控制器代码 #

public function deleteStaff($staff)
{
    $this->load->model('Staff_Model');
    $delRes = $this->Staff_Model->deleteStaff($staff);
    // 判断是否为AJAX请求
    if($this->input->is_ajax_request()){
        echo json_encode(['status' => $delRes ? 'success' : 'error']);
        exit;
    }
    // 兼容原有跳转逻辑
    redirect(base_url('index.php/admin/viewstaff'));
}

调整后的JS确认逻辑 #

if (result.isConfirmed) {
  fetch(delUrl, {
    method: 'GET',
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    }
  }).then(res => res.json())
  .then(data => {
    if(data.status === 'success'){
      Swal.fire('删除成功', '', 'success').then(() => {
        // 可选择刷新页面或直接移除当前行DOM
        window.location.reload();
        // 移除DOM示例：btn.closest('tr').remove();
      })
    }else{
      Swal.fire('删除失败，请重试', '', 'error')
    }
  })
}

内容的提问来源于stack exchange，提问作者Pasindu Ruwandeniya