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/ 安装 ...
随机推荐
- Supermarket（贪心/并查集）
题目链接 原创的博客 题意: 超市里有N个商品. 第i个商品必须在保质期(第di天)之前卖掉, 若卖掉可让超市获得pi的利润. 每天只能卖一个商品. 现在你要让超市获得最大的利润. n , p[i], ...
- 11.vue-router编程式导航
页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接或vue中的 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航 例如: ...
- 洛谷：P1783 海滩防御（二分+并查集 最短路 最小生成树）
题意: 给定长度为N的海滩,然后有M做防御塔,给出每座塔的位置Xi,到海岸的距离Yi. 求防御塔上最小观测半径Ri,使得海滩被封锁. 思路:要使左边界和右边界连通. 很nice,可以二分+并查集做. ...
- 阿里巴巴编程规约--digest
所谓卫语句,如果某个条件极其罕见,就应该单独检查该条件,并在该条件为真时立刻从函数中返回.这样的单独检查常常被称为“卫语句”. 微服务之间将DTO,Req放到一个单独的项目中,相关的项目都依赖这个底层 ...
- cube.js 新版本试用preosto
cube.js 新的版本添加了更多的数据库的支持,但是目前cubejs-cli 以及官方文档问题还挺多,使用不清晰,文档有明显的错误 以下演示presto 数据库的使用 环境准备 安装新版本的cube ...
- 开源项目 06 NPOI
using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; using System; using S ...
- linux命令之------Wc命令（word count）
Wc命令(word count) 1)作用:用于计算字数: 2)-c或--bytes或--chars只显示Bytes数: 3)-l和—line显示行号: 4)-w或words只显示字数: 5)--he ...
- struct tcphdr
包含在/usr/src/linux/include/linux/tcp.h struct tcphdr { __be16 source; __be16 dest; __be32 seq; __be32 ...
- GoCN每日新闻(2019-10-07)
GoCN每日新闻(2019-10-07) 国庆专辑:GopherChina 祝大家国庆节快乐(假期最后一天) GoCN每日新闻(2019-10-07) 1. Go 不好的点:JSON 解析的探 ...
- 测试Leader应该做哪些事
一.负责测试组的工作组织和管理 1.参加软件产品开发前的需求调研和分析: 2.根据需求,概要设计和开发计划编写项目总体测试计划,详细测试计划,测试大纲和测试文档结构表(测试计划 a.已上线产品维护以及 ...