SweetAlert Github：https://github.com/lipis/bootstrap-sweetalert

下载完后放入 /static/ 目录下

sweetalert.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>SweetAlert 测试</title>

    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">

</head>

<body>

<div class="container">

    <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>id</th>

                    <th>name</th>

                    <th>age</th>

                    <th>操作</th>

                </tr>

                </thead>

                <tbody>

                {% for p in person %}

                    <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/test.js"></script>

<script src="/static/bootstrap/js/bootstrap.min.js"></script>

<script src="/static/sweetalert/sweetalert.min.js"></script>

<script>

    // 找到删除按钮绑定的事件

    $(".del").on("click", function () {

        var $trEle = $(this).parent().parent();  // 当前点击事件的前两级，即为 tr 标签

        var delId = $trEle.children().eq(1).text();  // children 取得 td 标签，eq(1).text() 取得索引为 1 下的文本内容

        swal({

                title: "确定要删除吗？",

                text: "该操作将会删除该条数据",

                type: "warning",   // 此处可以修改 danger、warning、info

                showCancelButton: true,

                confirmButtonClass: "btn-danger",  // 此处可以修改 danger、warning、info

                confirmButtonText: "确定",

                cancelButtonText: "取消",

                closeOnConfirm: false

            },

            function () {

                // 向后端发送删除的请求

                $.ajax({

                    url: "/delete/",

                    type: "post",

                    data: {"id": delId},

                    success: function (arg) {

                        swal(arg, "该条数据已被删除！", "success");

                        $trEle.remove();  // 删除前端的内容

                    }

                });

            });

    })

</script>

</body>

</html>

在 bootstrap 网站上找到一个面板

再来找一个带边框的表格

在 https://lipis.github.io/bootstrap-sweetalert/ 可以看到一些弹窗示例

想用什么弹窗直接复制修改代码就好了

views.py：

from django.shortcuts import render, HttpResponse

from app01 import models

def sweet(request):

    person = models.Person.objects.all()

    return render(request, "sweetalert.html", {"person": person})

def delete(request):

    del_id = request.POST.get("id")

    models.Person.objects.filter(id=del_id).delete()

    return HttpResponse("删除成功！")

urls.py：

from django.conf.urls import url

from app01 import views

urlpatterns = [

    url(r'^sweet/', views.sweet),

    url(r'^delete/', views.delete),

]

访问，http://127.0.0.1:8000/sweet/

点击 “删除”

点击 “确定”

删除成功，然后点击 “OK”

删除了 id 为 4 的数据

但是这里删除成功的显示有点问题

右键 -> 检查

该弹窗在 h2 标签在 sweet-alert 下

在 sweetalert.html 添加以下的代码

再删除数据

Python - Django - SweetAlert 插件的使用的更多相关文章

  1. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  2. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  3. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  5. django系列6--Ajax06 使用插件,Sweet-Alert插件

    使用SweetAlert插件 GitHub上的下载链接 下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...

  6. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  7. Django框架10 /sweetalert插件、django事务和锁、中间件、django请求生命周期

    Django框架10 /sweetalert插件.django事务和锁.中间件.django请求生命周期 目录 Django框架10 /sweetalert插件.django事务和锁.中间件.djan ...

  8. python django 多级业务树形结构规划及页面渲染

    概述: 在项目中,父级到子级结构并不少见,如果仅仅的两层树形结构,我们可以使用数据库的外键设计轻松做到,子级业务表设计一字段外键到父级业务表,这样子到父.父到子的查询都非常简单. 但是往往父子结构会有 ...

  9. Python+Django+Eclipse 在Windows下快速开发自己的网站

    一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...

随机推荐

  1. Linux虚拟机安装（rhel 7.4）

    Linux虚拟机安装(rhel 7.4) linux 1. 创建虚拟机 1.1. 新建虚拟机 1.2. 启动虚拟机 附录:部分配置 1. 创建虚拟机 1.1. 新建虚拟机 新建虚拟机 典型虚拟机 稍后 ...

  2. SQL进阶系列之7用SQL进行集合运算

    写在前面 集合论是SQL语言的根基,因为这种特性,SQL也被称为面向集合语言 导入篇:集合运算的几个注意事项 注意事项1:SQL能操作具有重复行的集合(multiset.bag),可以通过可选项ALL ...

  3. VUE之路

    最近研究了下Vue这个前端框架,不得不说这个前端框架很是厉害.不过对于习惯了jQuery的我来说,刚上手那会儿还是踩了很多的坑啊.那会儿觉得天啊,这个Vue框架特别的绕,并且也更复杂.不过待我写了几天 ...

  4. 编程小白入门分享五：Vue的自定义组件

    前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...

  5. git下载带有子项目的项目

    我用的win  系统 bash命令 git clone --recursive xxxx.git

  6. VisualStudio 2019 Serials

    9DP6T-9AGWG-KWV33-9MPC8-JDCVF 7G2HE-JR8KL-ABB9D-Y7789-GLNFL U2PWU-H7D9H-69T3B-JEYC2-3R2NG R8R8P-MTT6 ...

  7. WinDbg常用命令系列---.effmach

    .effmach (Effective Machine) .effmach命令显示或更改调试器使用的处理器模式. .effmach [MachineType] 参数: MachineType指定调试器 ...

  8. 处理 MySQL 因为 SLAVE 崩溃导致需要手动跳过 GTID 的问题 | 关于 GTID

    今天发生了与之前某篇博客相似的问题,有同学在不同步的 binlog 库中使用语句 database.table 命令对表进行 drop 导致 master 丢弃该表但是从库并未能同步到该操作.并且后续 ...

  9. 初识 Python 作业及默写

    1.简述变量量命名规范 2.name = input(“>>>”) name变量是什么数据类型? 3.if条件语句的基本结构? 4.用print打印出下面内容: 文能提笔安天下, 武 ...

  10. Go-Json操作

    /** * @Author: jadeshu * @Description: * @File: main * @Version: 1.0.0 * @Date: 2019/11/7 2:33 */ pa ...