sweetalert插件的使用
sweetalert是一个漂亮的弹窗插件，使用它可以完成各种炫酷的弹窗效果
链接：sweetalert
实例
删除演示
urls.py
from django.contrib import admin
from django.urls import path
from app1 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
]
views.py ```python def index(request): return render(request, 'index.html')
<br>
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="/static/css/sweetalert.css">
</head>
<body>
<button class="btn">点我删除</button>
<script>
$('.btn').on('click', function () {
swal({
//提示的标题
title: '确定删除吗？',
//提示的文本
text: '你将无法恢复该文件',
//类型：警告，还有success,error和info
type: 'warning',
//显示取消按钮
showCancelButton: true,
//确认按钮颜色
confirmButtonColor: '#DD6B55',
//确认按钮内文本
confirmButtonText: '确定删除',
//取消按钮内文本
cancelButtonText: '取消删除',
closeOnConfirm: false,
closeOnCancel: false,
}, function (isConfirm) {
if (isConfirm) {
//点击确认按钮之后进行的操作，这里success不能改
swal('删除', '你的文件已经被删除', 'success');
} else {
//点击取消按钮之后进行的操作，这里error不能改
swal('取消', '你的文件是安全的', 'error');
}
})
})
</script>
</body>
</html>
显示效果
### 删除表格 修改views，增加一个delete函数 ```python def delete(request): if request.method == 'POST': response = {'"status': True} return HttpResponse(json.dumps(response)) else: return HttpResponse('非法请求') ```
修改index.html，定义一个table，模拟删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="/static/css/sweetalert.css">
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
</head>
<body>
{#<button class="btn">点我删除</button>#}
{% csrf_token %}
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>数据展示</h3>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
{# line_num自定义属性，方便获取序号 #}
<td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="1" value="delete"/>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="2" value="delete"/>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="3" value="delete"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
$('.btn-danger').click(function () {
let line_num = $(this).attr('line_num');
//在ajax的回调函数的外面用一个变量记录下来，方便ajax的回调函数使用
let _this = $(this); //选择删除的那一行
let csrf = $("[name='csrfmiddlewaretoken']").val();
swal({
title: '亲，您确定删除吗？',
text: '删除可就找不回来了哦！',
//试一试不同type有何区别
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#ff0000',
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnConfirm: false,
closeOnCancel: false,
}, function (isConfirm) {
console.log(isConfirm);
if (isConfirm) {
$.ajax({
url: '/delete/',
type: 'post',
data: {
"id": line_num,
csrfmiddlewaretoken: csrf,
},
success: function (data) {
data = JSON.parse(data);
if (data.status) {
console.log(data.status);
//第一个参数是title，第二个参数是text，第三个是type
swal('删除成功！', '记录已经被删除', 'success');
//删除一行
_this.parent().parent().remove();
} else {
swal('删除失败！', '删除失败，请重试!', 'error');
//跳转首页
{#window.location.href = '/index/';#}
}
}
})
} else {
swal('取消！', '你的数据是安全的', 'error')
}
})
})
</script>
</body>
</html>
## 小结 ### sweet语法 ```javascript swal({ 参数1：值1， 参数2：值2， }, function (isConfirm) { if (isConfirm) { swal(title, text, type); else { swal(title, text, type); } }) ``` ### 参数说明 - title: 提示的标题 - text: 提示的文本 - type: 类型 - showCancelButton: 是否显示取消按钮 - confirmButtonColor：确认按钮颜色 - confirmButtonText： 确认按钮文本 - cancelButtonText： 取消按钮文本 - closeOnConfirm：点击确认之后是否自动关闭 - closeOnCancel：点击取消之后是否自动关闭
