第一步：导入sweetalert.css与sweetalert.min.js文件
image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>sweetalert_demo</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
</head>
<body>
</body>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
</html>
第二步：
以person表为例，创建person显示列表
- html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>sweetalert_demo</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
</head>
<body>
<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>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>出生日期</th>
<th>操作台</th>
</tr>
</thead>
<tbody>
{% for p in persons %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ p.id }}</td>
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.birth|date:"Y-m-d" }}</td>
<td>
<button class="btn-danger"><i class="fa-trash-o">删除</i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
</html>
- person.py
def person(request):
ret = models.Person.objects.all()
return render(request,"sweetalert_demo.html",{"persons":ret})
image.png
第三步：点击删除按扭，显示是否要删除的提示框，这时要用到sweetAlert插件,插件下载地址：https://github.com/lipis/bootstrap-sweetalert
<script>
$(".del").on("click",function () {
swal('标题','内容',"success");
})
</script>
image.png
调整padding：
<style>
div.sweet-alert>h2 {
padding-top:15px;
}
</style>
swal()更多用法详见https://lipis.github.io/bootstrap-sweetalert/
swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
对上述代码进行修改
<script>
$(".del").on("click", function () {
swal({
title: "你确定要删除吗？",
text: "删除了就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-warning",
confirmButtonText: "确认",
cancelButtonText: "放弃",
closeOnConfirm: false
},
function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
})
image.png
第四步：加上ajax使前后端关联，取到删除的ID标签。
ajax请求方式是post,所以引用stupajax.js文件
ajax 数据字典取得要删除那行对应的ID标签，这个ID标签与后台del_person函数对应的ID取得关联。同时result参数传递到arg形参。
<script>
$(".del").on("click", function () {
var $trlie = $(this).parent().parent();
var delid = $trlie.children().eq(1).text();
swal({
title: "你确定要删除吗？",
text: "删除了就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-warning",
confirmButtonText: "确认",
cancelButtonText: "放弃",
closeOnConfirm: false
},
function () {
$.ajax({
url:'/del_person/',
type:'post',
data:{"id":delid},
success:function (arg) {
swal(arg, "你已经删除掉了", "success");
$trlie.remove()
}
});
});
})
</script>
- html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>sweetalert_demo</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<style>
div.sweet-alert > h2 {
padding-top: 15px;
}
</style>
</head>
<body>
<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>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>出生日期</th>
<th>操作台</th>
</tr>
</thead>
<tbody>
{% for p in persons %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ p.id }}</td>
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.birth|date:"Y-m-d" }}</td>
<td>
<button class="btn-danger del"><i class="fa fa-trash-o">删除</i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script src="/static/setupajax.js"></script>
<script>
$(".del").on("click", function () {
var $trlie = $(this).parent().parent();
var delid = $trlie.children().eq(1).text();
swal({
title: "你确定要删除吗？",
text: "删除了就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-warning",
confirmButtonText: "确认",
cancelButtonText: "放弃",
closeOnConfirm: false
},
function () {
$.ajax({
url:'/del_person/',
type:'post',
data:{"id":delid},
success:function (arg) {
swal(arg, "你已经删除掉了", "success");
$trlie.remove()
}
});
});
})
</script>
</body>
</html>
- 后台views.py
def person(request):
ret = models.Person.objects.all()
return render(request,"sweetalert_demo.html",{"persons":ret})
def del_person(request):
del_id = request.POST.get('id')
models.Person.objects.filter(id = del_id).delete()
result = "后台数据库存已删除"
return HttpResponse(result)
image.png
image.png
