Django-sweetAlert - 雨中寻雾

相关文章推荐
健壮的葡萄酒 · “85后”程远升任信达证券副总经理· 1 月前 ·
眼睛小的啄木鸟 · Troubleshooting High ...· 2 月前 ·
热心的黄花菜 · Tagged ...· 5 月前 ·
耍酷的胡萝卜 · Configure Windows ...· 1 年前 ·
酒量大的面包 · Perl调用shell命令方法小结(syst ...· 1 年前 ·
sweetalert_demo 以person表为例，创建person显示列表
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>sweetalert_demo</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
</head>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Person管理后台</h3>
    <div class="panel-body">
        <table class="table table-bordered">
            <thead>
                <th>序号</th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生日期</th>
                <th>操作台</th>
            </thead>
            <tbody>
            {% for p in persons %}
                <td>{{ forloop.counter }}</td>
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.age }}</td>
                <td>{{ p.birth|date:"Y-m-d" }}</td>
                    <button class="btn-danger"><i class="fa-trash-o">删除</i></button>
            {% endfor %}
            </tbody>
        </table>
</body>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
</html>
person.py
def person(request):
    ret = models.Person.objects.all()
    return render(request,"sweetalert_demo.html",{"persons":ret})
image.png
第三步：点击删除按扭，显示是否要删除的提示框，这时要用到sweetAlert插件,插件下载地址：https://github.com/lipis/bootstrap-sweetalert
<script>
     $(".del").on("click",function () {
        swal('标题','内容',"success");
</script>
swal({
  title: "Are you sure?",
  text: "Your will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonClass: "btn-danger",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
对上述代码进行修改
<script>
    $(".del").on("click", function () {
        swal({
                title: "你确定要删除吗？",
                text: "删除了就找不回来了哦！",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-warning",
                confirmButtonText: "确认",
                cancelButtonText: "放弃",
                closeOnConfirm: false
            function () {
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
第四步：加上ajax使前后端关联，取到删除的ID标签。

ajax请求方式是post,所以引用stupajax.js文件

ajax 数据字典取得要删除那行对应的ID标签，这个ID标签与后台del_person函数对应的ID取得关联。同时result参数传递到arg形参。
<script>
    $(".del").on("click", function () {
        var $trlie = $(this).parent().parent();
        var delid = $trlie.children().eq(1).text();
        swal({
                title: "你确定要删除吗？",
                text: "删除了就找不回来了哦！",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-warning",
                confirmButtonText: "确认",
                cancelButtonText: "放弃",
                closeOnConfirm: false
            function () {
                $.ajax({
                    url:'/del_person/',
                    type:'post',
                    data:{"id":delid},
                    success:function (arg) {
                         swal(arg, "你已经删除掉了", "success");
                         $trlie.remove()
</script>
<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>sweetalert_demo</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
    <style>
        div.sweet-alert > h2 {
            padding-top: 15px;
    </style>
</head>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Person管理后台</h3>
    <div class="panel-body">
        <table class="table table-bordered">
            <thead>
                <th>序号</th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生日期</th>
                <th>操作台</th>
            </thead>
            <tbody>
            {% for p in persons %}
                    <td>{{ forloop.counter }}</td>
                    <td>{{ p.id }}</td>
                    <td>{{ p.name }}</td>
                    <td>{{ p.age }}</td>
                    <td>{{ p.birth|date:"Y-m-d" }}</td>
                        <button class="btn-danger del"><i class="fa fa-trash-o">删除</i></button>
            {% endfor %}
            </tbody>
        </table>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script src="/static/setupajax.js"></script>
<script>
    $(".del").on("click", function () {
        var $trlie = $(this).parent().parent();
        var delid = $trlie.children().eq(1).text();
        swal({
                title: "你确定要删除吗？",
                text: "删除了就找不回来了哦！",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-warning",
                confirmButtonText: "确认",
                cancelButtonText: "放弃",
                closeOnConfirm: false
            function () {
                $.ajax({
                    url:'/del_person/',
                    type:'post',
                    data:{"id":delid},
                    success:function (arg) {
                         swal(arg, "你已经删除掉了", "success");
                         $trlie.remove()
</script>
</body>
</html>
后台views.py
def person(request):
    ret = models.Person.objects.all()
    return render(request,"sweetalert_demo.html",{"persons":ret})
def del_person(request):
    del_id = request.POST.get('id')
    models.Person.objects.filter(id = del_id).delete()
    result = "后台数据库存已删除"
    return HttpResponse(result)