django – SweetAlert插件

  • A+
所属分类:Python教程 技术新闻

SweetAlert插件GitHub地址:https://github.com/lipis/bootstrap-sweetalert
SweetAlert插件这里就不多做介绍,就是在删除的时候会有一个确认的提示,是否要删除。

SweetAlert示例如下

  • HTML代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">        <!-- 加这个标签,bootstrap自动支持移动端的适配 -->
    <title>Sweetalert_Demo_Package</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">   <!-- 引用sweetalert插件 -->
    <style>    <!--由于插件不太兼容中文,自定义了样式-->
        .sweet-alert>h2 {
            padding-top: 10px;
        }
    </style>
</head>
<body>

<!-- 这里是一段表格信息 -->
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">人员管理</h3>
        </div>
        <div class="panel-body">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>ID</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>生日</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for p in persons %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ p.id }}</td>
                        <td>{{ p.name }}</td>
                        <td>{{ p.age }}</td>
                        <td>{{ p.birthday|date:'Y-m-d' }}</td>
                        <td>
                            <button class="btn btn-danger del"> <i class="fa fa-trash-o"> 删除 </i> </button>
                        </td>
                    </tr>
                {% endfor %}

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

<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>     //导入sweetalert JS文件
<script src="/static/ajax_setup.js"></script>

<script>
    //对类名是del的标签绑定点击方法
    $(".del").on('click',function () {
        var $trEle = $(this).parent().parent();           //找到tr标签
        var delId = $trEle.children().eq(1).text();       //获取id列对应的文本值
        //swal("标题","内容","success")
        //success:成功、warning:警告、info:提示信息、error:错误提示

        swal({         //动态删除插件的内容,github地址:https://lipis.github.io/bootstrap-sweetalert/
              title: "请确认",
              text: "一旦删除,数据将无法找回",
              type: "warning",
              showCancelButton: true,
              confirmButtonClass: "btn-danger",
              confirmButtonText: "继续删除",
              cancelButtonText: "再想想",
              closeOnConfirm: false,
              showLoaderOnConfirm: true          //如果删除的比较慢时会有加载的图标
            },
            function(){
            $.ajax({         //ajax的删除操作
                url:"/del_person/",        //提交请求的url路径
                type:"post",                //请求方法
                data:{"id":delId},          //请求的数据,将要删除的文本值提交到后端
                success:function (arg) {    //收到相应后做什么
                    swal(arg, "你成功删除了数据!", "success");
                    $trEle.remove()      //后端数据删除后,删除对应的td标签
                }
            });
            });
    })
</script>

</body>
</html>
  • 后端代码如下
from django.shortcuts import render,HttpResponse
from app01 import models
import time

#展示函数
def person_list(request):
    all_person = models.Person.objects.all()    #从数据库里获取内容
    return render(request,"sweetalert_demo.html",{"persons":all_person})    #返回内容

#删除函数
def del_person(request):
    #time.sleep(3)      #模拟删除消耗时间
    del_id = request.POST.get("id")     #获取要删除的id
    models.Person.objects.filter(id=del_id).delete()    #执行删除方法
    return HttpResponse("删除成功!")     #返回结果

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: