Python - Django - SweetAlert 插件的使用

最新推荐文章于 2022-09-07 21:11:45 发布

Dim_Jerry

最新推荐文章于 2022-09-07 21:11:45 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

分类专栏： python全栈学习

本文链接：https://blog.youkuaiyun.com/Dim_Jerry/article/details/104033041

python全栈学习专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Python的Django框架中使用SweetAlert插件，以提高前端模态对话框的开发效率。详细讲解了环境搭建、SweetAlert_index.html的布局、views.py和urls.py的配置，以及在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用须知：

插件的下载链接：https://github.com/lipis/bootstrap-sweetalert
该插件的作用是：在一个表格中，对某一行的数据进行操作，弹出一个模态对话框，有效的减少我们自己自定义，提高效率

二、准备工作

环境搭建

本次插件测试需要用到的工具有bootstarp为我们提供表格的样式，另外还需要用到jquery。

SweetAlert_index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert 测试</title>
    <link rel="stylesheet" href="/static/plugin/sweetalert/sweetalert.css">
    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugin/font-awesome/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>序号(id)</th>
                    <th>name</th>
                    <th>title</th>
                    <th>age</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for row in person_list %}
                    <tr>
                        <td>{{ row.id }}</td>
                        <td>{{ row.name }}</td>
                        <td>{{ row.title }}</td>
                        <td>{{ row.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/js/jquery-1.12.4.js"></script>
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugin/sweetalert/sweetalert.js"></script>

<script>
    // 找到删除按钮绑定的事件
    $(".del").on("click", function () {
        var $trEle = $(this).parent().parent();  // 当前点击事件的前两级，即为 tr 标签
        var delId = $trEle.children().eq(0).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: "/sweetalert_delete",
                    type: "post",
                    data: {"id": delId},
                    success: function (arg) {
                        if(arg=='删除成功'){
                            swal(arg, "该条数据已被删除！", "success");
                            $trEle.remove();  // 删除前端的内容
                        }else{
                            swal(arg, "该条数据不存在或无效操作！", "success");
                        }


                    }
                });
            });
    })
</script>

</body>
</html>

展示后的成果：
在这里插入图片描述

在这一部分有些使用的是bootstrap的内容

views.py

def index(request):
    person_list = models.SweetAlert.objects.filter()
    return render(request, 'SweetAlert_index.html', {
        'person_list': person_list
    })

def sweetalert_delete(request):
    nid = request.POST.get('id')
    count = models.SweetAlert.objects.filter(id=nid).delete()
    if count:
        return HttpResponse("删除成功")
    else:
        return HttpResponse('删除失败')

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('sweetalert.html', SweetAlert_views.index),
    path('sweetalert_delete', SweetAlert_views.sweetalert_delete)
]

models

class SweetAlert(models.Model):
    name = models.CharField(max_length=32)
    title = models.CharField(max_length=32)
    age = models.IntegerField(default=18)

    def __str__(self):
        return self.name

总结

在这里插入图片描述
在这一部分代码中为该插件的实现重点

在这里插入图片描述

{
  title: "确定要删除吗？",
  text: "该操作将会删除该条数据",
  type: "warning",   // 此处可以修改 danger、warning、info
  showCancelButton: true,
  confirmButtonClass: "btn-danger",  // 此处可以修改 danger、warning、info
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  closeOnConfirm: false
            }

在这里插入图片描述

 function () {
                // 向后端发送删除的请求
                $.ajax({
                    url: "/sweetalert_delete",
                    type: "post",
                    data: {"id": delId},
                    success: function (arg) {
                        if(arg=='删除成功'){
                            swal(arg, "该条数据已被删除！", "success");
                            $trEle.remove();  // 删除前端的内容
                        }else{
                            swal(arg, "该条数据不存在或无效操作！", "success");
                        }


                    }
                });
            }