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 添加以下的代码
再删除数据
