ajax结合sweetalert实现删除按钮动态效果
一、ajax结合sweetalert实现删除按钮动态效果
可以将sweetalert动态效果绑定在按钮的js事件上。可以使alert触发框好看一点。
当ajax需要对数据进行修改时,可以通过alert框进行确认。
// 可以在我的github上复制
$('.del').click(function () {
let $btn = $(this);
swal({
title: "确定要删除这条数据吗?",
text: "删了就真没了!就得跑路了!!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确认删除!",
cancelButtonText: "取消!",
closeOnConfirm: false,
closeOnCancel: false,
showLoaderOnConfirm: true // 等待后端处理时间 。。。动画
},
function (isConfirm) {
if (isConfirm) {
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btn.attr('userId')},
success:function (data) {
if (data.code == 1000){
swal("数据已经删除!",data.msg,"warning");
$btn.parent().parent().remove()
}else {
swal("有Bug!","发生了未知的错误!","error");
}
}
});
} else {
swal("数据安全了 :)","别让别人发现你在干嘛 :)", "success");
}
});
})
二、bulk_create批量插入数据
1. 一条一条插入
很慢
def test(request):
for i in range(1000):
models.Test.objects.create(title=f'第{i}本书')
book_queryset = models.Test.objects.all()
return render(request,'test.html',locals())
2. 批量插入
很快
def test(request):
book_list = []
for i in range(10000):
book_list.append(models.Test(title=f'第二次第{i}本书'))
models.Test.objects.bulk_create(book_list) # 将整个列表插入数据库
book_queryset = models.Test.objects.all()
return render(request,'test.html',locals())
两者速度差距很大!!
三、自定义分页器
代码不需要掌握,只需要掌握推导思路。
需要掌握自定义分页器的使用方法!
后端:
# 测试批量插入数据
def test(request):
# 推导思路
# for i in range(1000):
# models.Test.objects.create(title=f'第{i}本书')
# book_list = []
# for i in range(10000):
# book_list.append(models.Test(title=f'第二次第{i}本书'))
# models.Test.objects.bulk_create(book_list) # 将整个列表插入数据库
# book_queryset = models.Test.objects.all()
# all_count = book_queryset.count()
# # 一页展示的数目
# per_page_num = 10
# all_page_num,more = divmod(all_count,per_page_num)
# if more:
# all_page_num += 1 # 确定到底需要多少页来展示
#
# # 用户想查看的当前页
# current_page = request.GET.get('page', 1)
# current_page = int(current_page)
#
# # 首尾页面
# start_page = (current_page - 1) * per_page_num
# end_page = current_page * per_page_num
#
# html = ''
# page_num = current_page
# if current_page<6:
# page_num = 6
# for i in range(current_page-3,current_page+4):
# if current_page == i:
# html += f'<li class="active"><a href="?page={i}">{i}</a></li>'
# else:
# html += f'<li><a href="?page={i}">{i}</a></li>'
# book_queryset = book_queryset[start_page:end_page]
# return render(request,'test.html',locals())
#-------------------------------------------------------------------
# 使用方法
book_queryset = models.Test.objects.all() # 你想要的分页展示的数据
current_page = request.GET.get('page',1) # 获取当前页
all_count = book_queryset.count() # 统计数据的总条数
page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=15,pager_count=7) # 生成分页器对象
page_queryset = book_queryset[page_obj.start:page_obj.end] # 对数据进行切片
return render(request,'test.html',locals())
前端:
{% for book in page_queryset %}
<p>{{ book.title }}</p>
{% endfor %}
{{ page_obj.page_html|safe }} # 自动渲染页面及样式
ajax结合sweetalert实现删除按钮动态效果的更多相关文章
- Django-choices字段值对应关系(性别)-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...
- django基础之day08,ajax结合sweetalert的使用
models.py文件 from django.db import models class User(models.Model): username=models.CharField(max_len ...
- Django --- ajax结合sweetalert使用,分页器,bulk_create批量创建数据
目录 ajax结合sweetalert使用 bulk_create批量插入数据 分页器的使用 ajax结合sweetalert使用 ajax可以在不刷新页面的情况下与后端进行交互,在对数据进行操作的时 ...
- django之ajax结合sweetalert使用,分页器和bulk_create批量插入 07
目录 sweetalert插件 bulk_create 批量插入数据 分页器 简易版本的分页器的推导 自定义分页器的使用(组件) sweetalert插件 有这么一个需求: 当用户进行一个删除数据 ...
- 用ajax对数据进行删除和查看
删除和查看详情操作的共同语句:就是怎么显示表? 1.在主体中写表的开头行,想要显示的内容,并且加载数据也要显示的地方也建张表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 & ...
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- Ajax对数据的删除与查看
1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...
- Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据
前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...
- selenium依次点击页面的删除按钮
需要依次点击页面的删除按钮,如下图: @Test public static void FaBu() { TestMenuJump.jumpExam(driver); TestMenuJump.jum ...
随机推荐
- C#控制打印机通过不同纸盒/进纸口进纸打印
通常我们是通过程序操作打印机打印我们设置好的内容,但基本都是打印机默认进纸口打印:最近有一个通过C#程序控制两个进纸口分别进一张纸进行打印的需求,通过偿失找到了解决方案如下: 关于C#调用打印机打印的 ...
- nexus https proxy
- nginx支持https配置
nginx证书 nginx.conf配置.
- Java基础-Java基本语法
注释: 1:多行 /* */ 2:单行 // 3:文档 /** */ 基本数据类型: 1:整形 byte(1) short(2) int(4) long(8)(一般申明lo ...
- .NET Core 3.0之深入源码理解HealthCheck(一)
写在前面 我们的系统可能因为正在部署.服务异常终止或者其他问题导致系统处于非健康状态,这个时候我们需要知道系统的健康状况,而健康检查可以帮助我们快速确定系统是否处于正常状态.一般情况下,我们会提供公开 ...
- 常见HTTP请求头和响应头
2. 常用的HTTP请求头 协议头 说明 示例 状态 Accept 可接受的响应内容类型(Content-Types). Accept: text/plain 固定 Accept-Charset 可接 ...
- MySql计算字段的长度
用户账号有用中文字符,查找所有含有中文字符的账号 SELECT member_name FROM table_member WHERE length(member_name)!=char_length ...
- 面试官:JVM锁优化都优化了啥?
从JDK1.6开始,JVM对锁进行了各种优化,目的就是为了在线程间更高效的共享数据和解决互斥同步的问题.从锁优化的话题开始,可以引申出很多考点面试题,比如锁优化的技术.各优化技术的细节.CAS实现原理 ...
- html汇总
- Hadoop 维护总结
1. 启动 history ./sbin/mrjobhistorydaemon.sh start historyserver ./sbin/yarn-daemon.sh start proxyserv ...