【笔记】AJAX+SweetAlert插件实现删除操作
2024-09-04 10:40:06
【笔记】AJAX+SweetAlert插件实现删除操作
Django AJAX SweetAlert
展示
SweetAlert 插件介绍
SweetAlert 是一个 JS 插件,能够完美替代 JS 自带的 alert 弹出框,并且功能强大,设计优美。
中文官网:SweetAlert中文
下载地址:sweetalert 项目 Github
使用方式
引入:
<script src="/static/sweetalert/sweetalert.min.js"></script>
基本使用
在 JS 代码中使用 swal 方法。常见方式:高级用法
swal({
参数键值对
},function () {
执行的操作
})
常用参数:
- title
- text
- showCancelButton
- confirmButtonClass
- confirmButtonText
- cancelButtonText
- closeOnConfirm
- showLoaderOnConfirm
示例所用 HTML 代码
注意:
- 样式用的是 bootstrap 样式类
- 图标用的是 fontawesome
- setupajax.js 是自己编写引入的,用于处理 csrf_token 问题,代码请见:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人员管理</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<style>
.sweet-alert>h2 {
padding-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">人员管理</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>ID</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>
<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/sweetalert/sweetalert.min.js"></script>
<script src="/static/setupajax.js"></script>
<script>
// 绑定删除按钮
$(".del").on("click", function () {
// swal("标题", "内容", "success");
// 获取要删除数据的id
// 获取表格当前行的标签对象
var $trEle = $(this).parent().parent();
var delId = $trEle.children().eq(1).text();
swal({
title: "你确定要删除吗?",
text: "一旦删除就找不回来了",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-warning",
confirmButtonText: "确认",
cancelButtonText: "取消",
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function () {
// 通过Ajax向后端传递数据
$.ajax({
url: "/delete/",
type: "post",
data: {"id":delId},
success:function (arg) {
swal(arg, "你可以跑路了", "success");
// 删除要删除数据所在的标签
$trEle.remove();
}
});
});
})
</script>
</body>
</html>
示例所用 views.py
def persons(request):
all_persons = models.Person.objects.all()
return render(request, "persons.html", {"persons": all_persons})
def delete(request):
import time
time.sleep(4)
delId = request.POST.get("id")
models.Person.objects.filter(id=delId).delete()
参考:https://www.cnblogs.com/liwenzhou/p/8718861.html
GitHub地址:https://github.com/protea-ban/oldboy/tree/master/s9day72/ajaxdemo
最新文章
- MVC的多表单
- linux命令语法格式
- Java 创建文件夹和文件
- android NDK入门 windows下安装cygwin
- javascript输出AscII码扩展集中的字符
- (三)结构体指针、sizeof
- windows phone 8.1开发笔记之Toast
- ES6笔记③
- Matlab中K-means聚类算法的使用(K-均值聚类)
- Android TextView自己主动换行文字排版參差不齐的原因
- Wix学习整理(3)——关于Windows Installer和MSI
- Error in .Call.graphics(C_palette2, .Call(C_palette2, NULL)) : invalid graphics state
- python内置函数 divmod()
- [LeetCode] Replace Words 替换单词
- android 获取SD卡的图片及其路径
- mysql GTID
- Java-字符串、集合
- docker 列出每个容器的IP
- 20165236 《Java程序设计》第七周学习总结
- [转]jsbsim基础概念
热门文章
- 洛谷 P1260 工程规划(差分约束)
- CHANGE DETECTION IN ANGULAR 2
- 6 Django 的视图层
- POJ 2396 Budget (有源汇有上下界最大流)
- UVa 11136 Hoax or what (STL)
- win32多线程-异步(asynchronous) I/O
- EBS 并发程序运行信息
- Oracle EBS Export File Format
- Mysql报Packet for query is too large (1040 >; 1024)错误
- AngularJS Backbone.js Ember.js 对比