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. Gerrit服务器权限管理

    Gerrit服务器权限管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Gerrit权限概述 1>.对象 Gerrit识别单个或多个人员集合. Gerrit不允许使用单 ...

  2. PHP三种输出的不同类型

    var_dump() 能打印出类型print_r() 只能打出值echo() 是正常输出... 需要精确调试的时候用 var_dump();一般查看的时候用 print_r()另外 , echo不能显 ...

  3. HTML+Css+JavaScript知识点汇总

    HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...

  4. 2019年牛客多校第一场 C题Euclidean Distance 暴力+数学

    题目链接 传送门 题意 给你\(n\)个数\(a_i\),要你在满足下面条件下使得\(\sum\limits_{i=1}^{n}(a_i-p_i)^2\)最小(题目给的\(m\)只是为了将\(a_i\ ...

  5. 补充拓展：CSS权重值叠加

    都知道CSS选择器有权重优先级,权重大的优先展示. 但部分人可能不清楚,权重值也是可以叠加计算的 <!DOCTYPE html> <html> <head> < ...

  6. GoLand——配置goproxy.io代理

    前言 由于众所周知的原因,也为了更好的下载go的包,所以找到了goproxy 配置 ctrl+alt+s->Go->Go Modules(vgo)->设置proxy为https:// ...

  7. 【Selenium-WebDriver实战篇】ScreenRecorder的实际输出路径设置（转）

    参考:https://www.cnblogs.com/yongfeiuall/p/4134139.html 我们可以用以下方式在Selenium Webdriver中capture video. 基本 ...

  8. “Another git process seems to be running in this repository...”Git此问题解决

    Git中显示:Another git process seems to be running in this repository, e.g.an editor opened by 'git comm ...

  9. shell脚本sed的基本用法

    sed 我们首先准备了一个测试文件 1. s 替换  将文件中的This替换cyy 在替换的时候如果加入了 -i 选项就会真的替换,但是只会替换每一行的第一个 -n 和 -p 一起使用表示的是打印那些 ...

  10. 自用 goodsdetail

    JSON.parse(data.parameter)  存的字符串 <select id="getGoodsBaseInfoById" resultType="co ...