补充一个SweetAlert插件示例

甜甜的警告

点击下载Bootstrap-sweetalert项目

需要的文件：

其中有例子：https://lipis.github.io/bootstrap-sweetalert/

示例：

sweetalert

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>sweetalert_demo</title>
  6     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
  7     <link rel="stylesheet" href="/static/fontAwesome/css/font-awesome.css">
  8     <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
  9     <style>
 10         .sweet-alert>h2{
 11             padding-top: 15px;
 12         }
 13     </style>
 14 
 15 </head>
 16 <body>
 17 <div class="container">
 18     <div class="panel panel-primary">
 19         <div class="panel-heading">
 20             <h3 class="panel-title">Person管理</h3>
 21         </div>
 22         <div class="panel-body">
 23             <table class="table table-bordered">
 24                 <thead>
 25                 <tr>
 26                     <th>序号</th>
 27                     <th>id</th>
 28                     <th>name</th>
 29                     <th>age</th>
 30                     <th>生日</th>
 31                     <th>操作</th>
 32                 </tr>
 33                 </thead>
 34                 <tbody>
 35                 {% for p in persons %}
 36                     <tr>
 37                         <td>{{ forloop.counter }}</td>
 38                         <td>{{ p.id }}</td>
 39                         <td>{{ p.name }}</td>
 40                         <td>{{ p.age }}</td>
 41                         <td>{{ p.birthday|date:'Y-m-d' }}</td>
 42                         <td>
 43                             <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
 44                         </td>
 45                     </tr>
 46                 {% endfor %}
 47                 </tbody>
 48             </table>
 49         </div>
 50     </div>
 51 </div>
 52 
 53 <script src="/static/jquery-3.2.1.min.js"></script>
 54 <script src="/static/bootstrap/js/bootstrap.js"></script>
 55 <script src="/static/sweetalert/sweetalert.min.js"></script>
 56 
 57 <script src="/static/setupajax.js"></script>
 58 <script>
 59     // 找到删除按钮绑定事件  找del类
 60     {#$(".del").on("click", function () {#}
 61         {#github中示例内容#}
 62     {#    swal({#}
 63     {#            title: "Are you sure?",#}
 64     {#            text: "Your will not be able to recover this imaginary file!",#}
 65     {#            type: "warning",#}
 66     {#            showCancelButton: true,#}
 67     {#            confirmButtonClass: "btn-danger",#}
 68     {#            confirmButtonText: "Yes, delete it!",#}
 69     {#            closeOnConfirm: false#}
 70     {#        },#}
 71     {#        function () {#}
 72     {#            swal("Deleted!", "Your imaginary file has been deleted.", "success");#}
 73     {#        });#}
 74 
 75     $(".del").on("click", function () {
 76                            {#td       tr#}
 77        var $trEle = $(this).parent().parent();
 78     {#eq索引，取其中的内容#}
 79        var delId = $trEle.children().eq(1).text();
 80 
 81        swal({
 82          title: "你确定要删除吗？",
 83          text: "一旦删除就找不回来了",
 84          type: "warning",
 85          showCancelButton: true,
 86          confirmButtonClass: "btn-warning",
 87          confirmButtonText: "确认",
 88          cancelButtonText: "取消",
 89          closeOnConfirm: false,
 90          showLoaderOnConfirm: true   // 显示删除的状态
 91        },
 92        function(){
 93            // 向后端发送删除的请求
 94            $.ajax({
 95                url: "/delete/",
 96                type: "POST",
 97                data: {"id":delId},
 98                success:function (arg) {
 99                    swal(arg, "你可以跑路了！", "success");
100                    $trEle.remove(); // 删去该条数据
101                }
102            });
103 
104        });
105     })
106 </script>
107 
108 </body>
109 </html>

views.py

 1 from app01 import models
 2 def persons(request):
 3     ret = models.Person.objects.all()
 4     # person_list = []
 5     # for i in ret:
 6     #     person_list.append({"name": i.name,
 7     #     "age": i.age})
 8     # print(person_list, type(person_list))
 9     # import json
10     # s = json.dumps(person_list)
11     # print(s, type(s))  # 字符串
12 
13     # # 下面是内置的序列化
14     # from django.core import serializers
15     # s = serializers.serialize("json", ret)
16     # print(s)
17     # return HttpResponse(ret)
18     print(ret)
19     return render(request, "sweetalert.html", {"persons": ret})
20 
21 def delete(request):
22     del_id = request.POST.get("id")
23     models.Person.objects.filter(id=del_id).delete()
24     print(del_id)
25     return HttpResponse("删除成功！")

所在项目

效果：