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. beta版本——第六次冲刺

    第六次冲刺 (1)SCRUM部分☁️ 成员描述: 姓名 李星晨 完成了哪个任务 修改注册时时候弹窗提醒不正确的问题 花了多少时间 0.5h 还剩余多少时间 1.5h 遇到什么困难 没有 这两天解决的进 ...

  2. python+正则提取+ip代理爬取糗事百科文字信息

    很多网站都有反爬措施,最常见的就是封ip,请求次数过多服务器会拒绝连接,如图: 在程序中设置一个代理ip,可有效的解决这种问题,代码如下: # 需要的库 import requests import ...

  3. Centos7-网卡配置

    目标计划:熟悉Linux网卡 1.修改网卡名称,替换自动生成的网卡名 2.新建网卡配置文件与新增网卡的关系 3.网卡bond模式配置,team模式 4.NetworkManager-nmcli管理网络 ...

  4. 《Coderxiaoban团队》团队作业5：项目需求分析改进与系统设计

    实验八 <Coderxiaoban团队>团队作业5:项目需求分析改进与系统设计 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 团队作业5:项目需求分析改进与 ...

  5. YII2 更新数据不成功

    起因: CLI模式,定时任务.同步其他系统中的DB数据,通过视图的方式. 历程: 原脚本已经写好,实在已经有的基础上修改,增加新的字段. 加了字段后,执行,但始终不成功,表里记录的utime也是能更新 ...

  6. 1.zookeeper是干什么的?

    Zookeeper是Hadoop的一个子项目,虽然源自hadoop,但是我发现zookeeper脱离hadoop的范畴开发分布式框架的运用越来越多.今天我想谈谈zookeeper,本文不谈如何使用zo ...

  7. Vue --- 前后台总结

    请求生命周期: 1.先请求路由,在去替换APP.vue中的router-views 2.@表示src 3.加载全局css: require('@/assets/....') 4.获取当前路由 this ...

  8. 使用singer 转换gitbase 数据到postgresql

    gitbase 是mysql server 的一个实现(主要是用来分析git仓库代码),但是里面好多功能可能并不是很强大(sql 的限制) 我们可以通过singer 的tap-mysql 将数据抽取到 ...

  9. vue-router 的两种模式的区别

    Vue Router 是Vue官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认 hash 模式,还有一种是history模式. hash模 ...

  10. [USACO06FEB] Stall Reservations 贪心

    [USACO06FEB] Stall Reservations 贪心 \(n\)头牛,每头牛占用时间区间\([l_i,r_i]\),一个牛棚每个时间点只能被一头牛占用,问最少新建多少个牛棚,并且每头牛 ...