【笔记】AJAX+SweetAlert插件实现删除操作

【笔记】AJAX+SweetAlert插件实现删除操作

Django AJAX SweetAlert 

展示

 

SweetAlert 插件介绍

SweetAlert 是一个 JS 插件，能够完美替代 JS 自带的 alert 弹出框，并且功能强大，设计优美。

中文官网：SweetAlert中文

下载地址：sweetalert 项目 Github

使用方式

  1. 引入：

    <script src="/static/sweetalert/sweetalert.min.js"></script>

  2. 基本使用
    在 JS 代码中使用 swal 方法。常见方式：

     


     

     

  3. 高级用法

    swal({
    参数键值对
},function () {
    执行的操作
})

    常用参数：

    • title
    • text
    • showCancelButton
    • confirmButtonClass
    • confirmButtonText
    • cancelButtonText
    • closeOnConfirm
    • showLoaderOnConfirm

示例所用 HTML 代码

注意：

  1. 样式用的是 bootstrap 样式类
  2. 图标用的是 fontawesome
  3. setupajax.js 是自己编写引入的，用于处理 csrf_token 问题，代码请见：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员管理</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">

    <style>
        .sweet-alert>h2 {
            padding-top: 15px;
        }
    </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>
                </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>
                            <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.3.1.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script src="/static/setupajax.js"></script>
<script>
    // 绑定删除按钮
    $(".del").on("click", function () {
        // swal("标题", "内容", "success");

        // 获取要删除数据的id
        // 获取表格当前行的标签对象
        var $trEle = $(this).parent().parent();
        var delId = $trEle.children().eq(1).text();

        swal({
            title: "你确定要删除吗？",
            text: "一旦删除就找不回来了",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-warning",
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            closeOnConfirm: false,
            showLoaderOnConfirm: true
        },
            function () {
                // 通过Ajax向后端传递数据
                $.ajax({
                    url: "/delete/",
                    type: "post",
                    data: {"id":delId},
                    success:function (arg) {
                        swal(arg, "你可以跑路了", "success");
                        // 删除要删除数据所在的标签
                        $trEle.remove();
                    }
                });
            });
    })
</script>
</body>
</html>

示例所用 views.py

def persons(request):
    all_persons = models.Person.objects.all()
    return render(request, "persons.html", {"persons": all_persons})


def delete(request):
    import time
    time.sleep(4)
    delId = request.POST.get("id")
    models.Person.objects.filter(id=delId).delete()

参考：https://www.cnblogs.com/liwenzhou/p/8718861.html

GitHub地址：https://github.com/protea-ban/oldboy/tree/master/s9day72/ajaxdemo

 

posted @ 2018-08-20 09:11  banshaohuan  阅读(628)  评论(0)  编辑  收藏  举报