加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

SweetAlert插件

发布时间:2020-12-17 20:50:51 所属栏目:安全 来源:网络整理
导读:点击下载Bootstrap-sweetalert项目。 $(".btn-danger").on("click",function () { swal({ title: "你确定要删除吗?",text: "删除可就找不回来了哦!",type: "warning",showCancelButton: true,confirmButtonClass: "btn-danger",confirmButtonText: "删除",

点击下载Bootstrap-sweetalert项目。

$(".btn-danger").on("click",function () {
  swal({
    title: "你确定要删除吗?",text: "删除可就找不回来了哦!",type: "warning",showCancelButton: true,confirmButtonClass: "btn-danger",confirmButtonText: "删除",cancelButtonText: "取消",cloSEOnConfirm: false
    },function () {
      var deleteId = $(this).parent().parent().attr("data_id");
      $.ajax({
        url: "/delete_book/",type: "post",data: {"id": deleteId},success: function (data) {
          if (data.status === 1) {
            swal("删除成功!","你可以准备跑路了!","success");
          } else {
            swal("删除失败","你可以再尝试一下!","error")
          }
        }
      })
    });
})

?实例:

def user_list(request):
    all_user = models.User.objects.all()
    return render(request,"user_list.html",{"all_user": all_user})


def delete_user(request):
    if request.method == "POST":
        print(request.POST)
        res = {"code": 0}
        delete_id = request.POST.get("id")
        models.User.objects.filter(id=delete_id).delete()
        return JsonResponse(res)
views.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/sweetalert.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for user in all_user %}
                    <tr data_id="{{ user.id }}">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ user.username }}</td>
                        <td>
                            <button class="btn btn-warning">编辑</button>
                            <button class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="/static/setupAjax.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="/static/sweetalert.min.js"></script>
<script>
    $(".btn-danger").on("click",function () {
        var _this = this;
        swal({
                title: "你确定要删除吗?",text: "删除可就找不回来了哦!",type: "warning",// 是否显示取消按钮
                confirmButtonClass: "btn-danger",// 确认按钮的样式类是什么
                confirmButtonText: "删除",// 确认按钮的文本内容是啥
                cancelButtonText: "取消",// 取消按钮的文本内容
                cloSEOnConfirm: false              // 点击确认按钮是否关闭
            },function () {  // 点击确认就执行的匿名函数
                console.log(_this);
                var deleteId = $(_this).parent().parent().attr("data_id");
                console.log(deleteId);
                console.log("要发送ajax请求拉....");
                $.ajax({
                    url: "/delete_user/",type: "post",data: {"id": deleteId},success: function (res) {
                        console.log(res);
                        if (res.code === 0) {
                            swal("删除成功!","你可以准备跑路了!","success");
                            // 手动在页面上用js删掉那一行数据
                        } else {
                            swal("删除失败","你可以再尝试一下!","error")
                        }
                    }
                })
            });
    })
</script>
</body>
</html>
user_list.html

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读