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. 获取ul li的value的值

    <script> $(function(){ $(".month-list").find("li").click(function(){ var t ...

  2. MySQL:主键、外键、索引(一)

    干货: 主键是关系表中记录的唯一标识.主键的选取非常重要:主键不要带有业务含义,而应该使用BIGINT自增或者GUID类型.主键也不应该允许NULL.可以使用多个列作为联合主键,但联合主键并不常用. ...

  3. Kotlin协程作用域与构建器详解

    在上次我们是通过了这种方式来创建了一个协程: 接着再来看另一种创建协程的方式: 下面用它来实现上一次程序一样的效果,先来回顾一下上一次程序的代码: 好,下面改用runBlocking的方式: 运行一下 ...

  4. monkey内存泄露

    monkey内存泄露 1.内存泄露发现方法 执行monkey测试时有时会有内存泄露情况,可以进行排查 a.手机弹出out of  memory对话框--基本确定有内存泄露 b.手机没有提示但是实际有内 ...

  5. 深入详解JVM内存模型

    JVM内存结构 由上图可以清楚的看到JVM的内存空间分为3大部分: 堆内存 方法区 栈内存 其中栈内存可以再细分为java虚拟机栈和本地方法栈,堆内存可以划分为新生代和老年代,新生代中还可以再次划分为 ...

  6. (实例2) TFT2.0液晶屏幕测试 mega2560

    关键修改 针对mega2560板子 #define TFT_RST A4 #define TFT_RS A3 #define TFT_CS A5 // SS #define TFT_SDI A2 // ...

  7. Redis存储Set

    与List不同Set不能存储相同元素,且数据没有顺序. 存储结构: 1.存储与查看数据: 2.删除指定的一个元素: 3.判断是否存在某一个元素(存在返回1,不存在返回0): 4.判断两个set中的特有 ...

  8. DotNetty 常用库

    https://github.com/Azure/DotNetty DotNetty中几个重要的库(程序集): DotNetty.Buffers: 对内存缓冲区管理的封装. DotNetty.Code ...

  9. AD域服务器组策略实现文件夹重定向 保护文件安全

     网络管理员或许都遇到过类似的烦恼.如系统崩溃后,原来存放在 C盘的应用程序专署数据都丢失了;或者桌面上的文件莫名其妙少了,等等.有时候,我们也千方百计提醒员工不要把文件存放在桌面上,但是他们总是不听 ...

  10. 羊村的OI题解

    目录 喜羊羊与灰太狼--仓库管理 喜羊羊与灰太狼--破译密码 喜羊羊与灰太狼--烦恼的礼物 喜羊羊与灰太狼--仓库管理 传送门 水的一批,还让开o2了 就不写了 #include<iostrea ...