ajax结合sweetalert实现删除按钮动态效果

目录

• 一、ajax结合sweetalert实现删除按钮动态效果
• 二、bulk_create批量插入数据
  • 1. 一条一条插入
  • 2. 批量插入
• 三、自定义分页器

一、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 }}  # 自动渲染页面及样式