popup功能

urls:

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from django.conf.urls import url
from chapter01 import views

urlpatterns=[
    url('popupp',views.popparent),
    url('popupr',views.realpopup,name="addgoup"),
    url('double',views.doublepopup,name="doublepopup"),
]

views

from django.shortcuts import render
from django.shortcuts import HttpResponse
from chapter01 import models
# Create your views here.


def popparent(request):

    usergroup_list=models.UserGroup.objects.all()

    return render(request, 'chapter01/usergroup_list.html', {'usergroup_list':usergroup_list})


def realpopup(request):
    if request.method=="GET":
        return render(request,'chapter01/add_usergroup.html')
    else:
        popupid=request.GET.get("popup")
        if popupid:
            title=request.POST.get("title")
            obj=models.UserGroup.objects.create(title=title)
            response={'data_dict':{'pk':obj.pk,'text':str(obj),'popid':popupid}}

            """
            1.关闭popup页面
            2.将新增数据添加，传送到到原来发送pop页面的 popid=ugID
            """

            return render(request,'chapter01/popup_response.html',response)
        else:
            title=request.POST.get("title")
            models.UserGroup.objects.create(title=title)
            return HttpResponse("重定向列表页面")



def doublepopup(request):
    if request.method=="GET":
        return render(request,'chapter01/doublekill.html')

add_usergroup.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>popuptest</title>
</head>
<body>
<form method="POST">
    {% csrf_token %}
    <input type="text" name="title"/>
    <input type="submit" value="提交">
</form>
    <a href="#" onclick="popupUrl('/chapter01/double/')">多级弹出</a>

<script>
    function popupUrl(url) {
        window.open(url,'x2','status=1,300px,heigh:200px,toolbar=0,resizeable=1')
    }

    function f1() {
        alert(1111)
    }
</script>
</body>
</html>



usergroup_list.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>usergroup</title>
</head>
<body>
<p>用户名:<input type="text"></p>

<p>用户组:
    <select id="ugID">
    {% for i in usergroup_list %}
        <option value="{{ i.pk }}">{{ i.title }}</option>
{% endfor %}
</select>
<a  onclick="popupUrl('/chapter01/popupr/?popup=ugID')">添加</a>
</p>
<script>
    /*
    *'xxxxx'是弹窗的别名，在出来的弹窗是将不是这个别名 而是会替换这个名字
    * */
    function popupUrl(url) {
        window.open(url,'xxxxx','status=1,height:400,400,toolbar=0,resizeable=0')
    }
    
    function popupCallBack1(data_dict) {
        var tag=document.createElement("option");
        tag.innerHTML=data_dict.text;
        tag.setAttribute('value',data_dict.pk);
        tag.setAttribute('selected','selected');

        document.getElementById(data_dict.popid).appendChild(tag)
    }
    
    function popupCallBack2() {
        
    }
</script>

</body>
</html>

popup_response.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正在关闭的页面</title>
</head>
<body>
<script>
    /*
    opener谁发起的代指谁
     */
    var data_dict={{ data_dict|safe }};
    opener.popupCallBack1(data_dict);
    window.close();

</script>

</body>
</html>

doublekill.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
doublekilled
</body>
</html>