SweetAlert Github：https://github.com/lipis/bootstrap-sweetalert

下载完后放入 /static/ 目录下

sweetalert.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>SweetAlert 测试</title>

    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">

</head>

<body>

<div class="container">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">Person 管理界面</h3>

        </div>

        <div class="panel-body">

            <table class="table table-bordered">

                <thead>

                <tr>

                    <th>序号</th>

                    <th>id</th>

                    <th>name</th>

                    <th>age</th>

                    <th>操作</th>

                </tr>

                </thead>

                <tbody>

                {% for p in person %}

                    <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/test.js"></script>

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

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

<script>

    // 找到删除按钮绑定的事件

    $(".del").on("click", function () {

        var $trEle = $(this).parent().parent();  // 当前点击事件的前两级，即为 tr 标签

        var delId = $trEle.children().eq(1).text();  // children 取得 td 标签，eq(1).text() 取得索引为 1 下的文本内容

        swal({

                title: "确定要删除吗？",

                text: "该操作将会删除该条数据",

                type: "warning",   // 此处可以修改 danger、warning、info

                showCancelButton: true,

                confirmButtonClass: "btn-danger",  // 此处可以修改 danger、warning、info

                confirmButtonText: "确定",

                cancelButtonText: "取消",

                closeOnConfirm: false

            },

            function () {

                // 向后端发送删除的请求

                $.ajax({

                    url: "/delete/",

                    type: "post",

                    data: {"id": delId},

                    success: function (arg) {

                        swal(arg, "该条数据已被删除！", "success");

                        $trEle.remove();  // 删除前端的内容

                    }

                });

            });

    })

</script>

</body>

</html>

在 bootstrap 网站上找到一个面板

再来找一个带边框的表格

在 https://lipis.github.io/bootstrap-sweetalert/ 可以看到一些弹窗示例

想用什么弹窗直接复制修改代码就好了

views.py：

from django.shortcuts import render, HttpResponse

from app01 import models

def sweet(request):

    person = models.Person.objects.all()

    return render(request, "sweetalert.html", {"person": person})

def delete(request):

    del_id = request.POST.get("id")

    models.Person.objects.filter(id=del_id).delete()

    return HttpResponse("删除成功！")

urls.py：

from django.conf.urls import url

from app01 import views

urlpatterns = [

    url(r'^sweet/', views.sweet),

    url(r'^delete/', views.delete),

]

访问，http://127.0.0.1:8000/sweet/

点击 “删除”

点击 “确定”

删除成功，然后点击 “OK”

删除了 id 为 4 的数据

但是这里删除成功的显示有点问题

右键 -> 检查

该弹窗在 h2 标签在 sweet-alert 下

在 sweetalert.html 添加以下的代码

再删除数据

Python - Django - SweetAlert 插件的使用的更多相关文章

  1. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  2. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  3. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  5. django系列6--Ajax06 使用插件,Sweet-Alert插件

    使用SweetAlert插件 GitHub上的下载链接 下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...

  6. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  7. Django框架10 /sweetalert插件、django事务和锁、中间件、django请求生命周期

    Django框架10 /sweetalert插件.django事务和锁.中间件.django请求生命周期 目录 Django框架10 /sweetalert插件.django事务和锁.中间件.djan ...

  8. python django 多级业务树形结构规划及页面渲染

    概述: 在项目中,父级到子级结构并不少见,如果仅仅的两层树形结构,我们可以使用数据库的外键设计轻松做到,子级业务表设计一字段外键到父级业务表,这样子到父.父到子的查询都非常简单. 但是往往父子结构会有 ...

  9. Python+Django+Eclipse 在Windows下快速开发自己的网站

    一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...

随机推荐

  1. Python入门篇-解析式、生成器

    Python入门篇-解析式.生成器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.列表解析式(List Comprehension) 1>.列表解析式语法 语法 [ 返回 ...

  2. jquery 子元素 后代元素 兄弟元素 相邻元素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  3. Mysql【第三课】

  4. SQLAlchemy的应用创建

    1.首先创建app文件夹 同django 创建app 一样 创建文件 在创建的views中写入两个蓝图函数为了操作数据库的增删改查 acc.py from flask import Blueprint ...

  5. Apache虚拟主机&伪静态配置

    Apache基本操作 安装:yum install httpd 启动:systemctl start httpd 查看进程:ps -ef | grep httpd 查看端口:sudo netstat ...

  6. Java动态代理演变之路

    1.什么是代理? 代理,英文成文Proxy.意思是你不用去做,别人代替你去处理.比如有人想找明星周董去唱歌,他需要做签约.讨论.唱歌和付款等等过程,但真正周董擅长的事情是唱歌,其他的事情可以交代给他的 ...

  7. wordpress更新出现Briefly unavailable for scheduled maintenance. Check back in a minute.

    今天ytkah在更新wordpress插件时出现了Briefly unavailable for scheduled maintenance. Check back in a minute.查找了相关 ...

  8. STM32 IAP程序 源码 和测试代码 有详细的中文注释

    http://bbs.21ic.com/forum.php?mod=viewthread&tid=588265&reltid=624002&pre_pos=2&ext= ...

  9. hibernate笔记

    1.hibernate中的list()遍历方法和iterator()遍历方法之间的区别 1:返回的类型不一样,list()返回List, iterate()返回Iterator,2: 获取数据的方式不 ...

  10. 【比赛题解】CSP2019 简要题解

    D1T1 code 签到题,大家都会. 可以从高位往低位确定,如果遇到 \(1\),则将排名取反一下. 注意要开 unsigned long long. #include <bits/stdc+ ...