Python - Django - SweetAlert 插件的使用
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 插件的使用的更多相关文章
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django(序列化、SweetAlert插件)
day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- django系列6--Ajax06 使用插件,Sweet-Alert插件
使用SweetAlert插件 GitHub上的下载链接 下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- Django框架10 /sweetalert插件、django事务和锁、中间件、django请求生命周期
Django框架10 /sweetalert插件.django事务和锁.中间件.django请求生命周期 目录 Django框架10 /sweetalert插件.django事务和锁.中间件.djan ...
- python django 多级业务树形结构规划及页面渲染
概述: 在项目中,父级到子级结构并不少见,如果仅仅的两层树形结构,我们可以使用数据库的外键设计轻松做到,子级业务表设计一字段外键到父级业务表,这样子到父.父到子的查询都非常简单. 但是往往父子结构会有 ...
- Python+Django+Eclipse 在Windows下快速开发自己的网站
一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...
随机推荐
- root用户被提示：Operation not permitted
一.问题 今天为了删除一个多余的的软件,在删除该软件安装目录时,提示rm: cannot remove ‘.user.ini’: Operation not permitted,root权限都不能删除 ...
- JS数组扁平化(flat)
需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_ ...
- springmvc的控制器是不是单例模式,如果是,有什么问题,怎么解决?
默认情况下是单例模式, 在多线程进行访问的时候,有线程安全问题. 但是不建议使用同步,因为会影响性能. 解决方案,是在控制器里面不能写成员变量. 为什么设计成单例设计模式? 1.性能(不用每次请求都创 ...
- HDU - 3311: Dig The Wells (斯坦纳树)
题意:给你n个寺庙,m个村庄,p条路,现在你要在这n+m个位置中选出若干个位置打井,每个位置打井的费用会告诉你,同时p条路也有修建费用,现在每个寺庙都住着一个和尚,问你最小的费用让这n个和尚都能喝上水 ...
- 关于原生js的节点兼容性
关于节点的兼容性: 1:获取元素的子节点 a: childNodes:获取元素的子节点,空文本,非空文本,注释,获取的比较全面, 如果只是想获取元素的子节点,请用(children) b: c ...
- Mycat 全局系列号（转载）
概述 本篇文章介绍mycat怎样在分库分表的情况下保证主键的全局唯一方法,接下来就来分析三种方法各自的优缺点. 配置 文件方式获取 1.修改server配置文件 vim server.xml < ...
- 内核用户模式调试支持（Dbgk）
简介 将详细分析Windows调试的内核模式接口.希望读者对C和通用NT内核体系结构和语义有一些基本的了解.此外,这并不是介绍什么是调试或如何编写调试器.它可以作为经验丰富的调试器编写人员或好奇的安全 ...
- jmxtrans docker-compose 运行
以下是一个简单的demo,使用jmxtrans 进行jmx 指标的处理,项目使用docker-compose 运行 同时写入数据到graphite 环境准备 docker-compose文件 ve ...
- 洛谷 P2858 [USACO06FEB]奶牛零食Treats for the Cows 题解
P2858 [USACO06FEB]奶牛零食Treats for the Cows 题目描述 FJ has purchased N (1 <= N <= 2000) yummy treat ...
- string拼接时去掉最后一个逗号
str.replace(str.length() - 1, str.length(), "");