第一步：導(dǎo)入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表為例，創(chuàng)建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('標(biāo)題','內(nèi)容',"success");
})
</script>
image.png
調(diào)整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: "確認(rèn)",
cancelButtonText: "放棄",
closeOnConfirm: false
},
function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
})
image.png
第四步：加上ajax使前后端關(guān)聯(lián)，取到刪除的ID標(biāo)簽蚌堵。
ajax請求方式是post,所以引用stupajax.js文件
ajax 數(shù)據(jù)字典取得要刪除那行對應(yīng)的ID標(biāo)簽买决，這個ID標(biāo)簽與后臺del_person函數(shù)對應(yīng)的ID取得關(guān)聯(lián)。同時result參數(shù)傳遞到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: "確認(rèn)",
cancelButtonText: "放棄",
closeOnConfirm: false
},
function () {
$.ajax({
url:'/del_person/',
type:'post',
data:{"id":delid},
success:function (arg) {
swal(arg, "你已經(jīng)刪除掉了", "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: "確認(rèn)",
cancelButtonText: "放棄",
closeOnConfirm: false
},
function () {
$.ajax({
url:'/del_person/',
type:'post',
data:{"id":delid},
success:function (arg) {
swal(arg, "你已經(jīng)刪除掉了", "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 = "后臺數(shù)據(jù)庫存已刪除"
return HttpResponse(result)
image.png
image.png
