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/ 安装 ...
随机推荐
- SpringBoot启动流程及其原理
Spring Boot.Spring MVC 和 Spring 有什么区别? 分别描述各自的特征: Spring 框架就像一个家族,有众多衍生产品例如 boot.security.jpa等等:但他们的 ...
- 4.Linq To Xml操作XML增删改查
转自https://www.cnblogs.com/wujy/p/3366812.html 对XML文件的操作在平时项目中经常要运用到,比如用于存放一些配置相关的内容:本文将简单运用Linq TO X ...
- 《逆袭团队》第九次团队作业【Beta】Scrum meeting 3
项目 内容 软件工程 任课教师博客主页链接 作业链接地址 团队作业9:Beta冲刺与团队项目验收 团队名称 逆袭团队 具体目标 (1)掌握软件黑盒测试技术:(2)学会编制软件项目总结PPT.项目验收报 ...
- c#3.0 Lambda 表达式
使用c# 2.0 中的匿名方法查找“内部包含abc子串的所有字符串”: list.FindAll( delegate(string s) { renturn s.indexof("abc&q ...
- 超详细的Hadoop2配置详解
1. 集群环境 Master 192.168.2.100 Slave1 192.168.2.101 Slave2 192.168.2.102 2. 下载安装包 Master wget http://m ...
- Kafka为什么这么快？
批量处理 传统消息中间件的消息发送和消费整体上是针对单条的.对于生产者而言,它先发一条消息,然后broker返回ACK表示已接收,这里产生2次rpc:对于消费者而言,它先请求接受消息,然后broker ...
- Dubbo源码分析：ＣhannelHandler
背景 一个请求经过序列化二进制数据转化成对象之后.请求进入netty框架,netty框架经过业务处理把主动权转交给NettyHandler对象.NettyHandler进入ChannelHandler ...
- CSPS_112
这是Dybala神的差点AK场, 可我T2读入写挂&&T3上届算错没有AK 如果这是C... T1 xjb猜了个结论就过对拍 T2 topsort好题 T3 各险绅嗵的一个dp 我打的 ...
- e3s10 网络管理
1. host上设置 iptables -t nat -A POSTROUTING -o eno1 -j MASQUERADE # https://www.unixtutorial.org/how-t ...
- 【整理】Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得
[整理]Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得 iOS模拟器简介 iOS功能简介 iOS模拟器,是在Mac下面开发程序时,开发iOS平台的程序时候,可以使用的辅助工具 ...