popup

 

 

一、popup流程

1、add/edit页面，针对fk、m2m的那些值，绑定新增窗口的函数，且定义callback函数。

url得带一些参数，比如?popid=xxx，以方便回调时查找该id进行修改值

    <script>
        function popupCallBack(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 popupUrl(url){
            window.open(url,"win_name","status=1,height:500,width:600,toolbar=0, resizeable=0");
        }
    </script>

 

2、通过新窗口添加该值，通过views.py判断，如果是popup则返回render(popup页面)，再调用callback函数

        popid = request.GET.get("popup")
        if popid:
            # 通过popup新创建一个页面
            title = request.POST.get("title")
            obj = models.UserGroup.objects.create(title=title)
            # response = {"id":obj.id,"title":obj.title}
            # 1.关闭popup页面
            # 2.将新增数据添加，传送到原来发送pop页面中的ugID标签位置 popid=popID
            context = {
                "data_dict":{"pk":obj.pk,"text":obj.title,"popid":popid}
            }
            return render(request,"popup_response.html",context)

3、添加完成后，callback函数修改本页面的option值

        function popupCallBack(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);
        }

 

二、实例

urlpatterns = [
    # path('admin/', admin.site.urls),
    re_path("^$",views.index,name="haha"),
    re_path("^addtest/$",views.add_test),
]
urls.py
from django.shortcuts import render,HttpResponse
from app01 import models

def index(request):
    ''' 访问初始页，添加数据 '''
    user_group_list = models.UserGroup.objects.all()
    context = {
        "user_group_list":user_group_list
    }
    return render(request,"test.html",context)

def add_test(request):
    """ FK的添加页面，可以使popup的，也可以使正常的 """
    if request.method == "GET":
        return render(request,"add_test.html")
    else:
        popid = request.GET.get("popup")
        if popid:
            # 通过popup新创建一个页面
            title = request.POST.get("title")
            obj = models.UserGroup.objects.create(title=title)
            # response = {"id":obj.id,"title":obj.title}
            # 1.关闭popup页面
            # 2.将新增数据添加，传送到原来发送pop页面中的ugID标签位置 popid=popID
            context = {
                "data_dict":{"pk":obj.pk,"text":obj.title,"popid":popid}
            }
            return render(request,"popup_response.html",context)
        else:
            # 正常操作
            title = request.POST.get("title")
            models.UserGroup.objects.create(title=title)
            return HttpResponse("列表页面：所有")
views.py
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>用户：<input type="text"></p>
    <p>用户组：
        <select name="" id="ugID">
        {% for user_group in user_group_list %}
            <option value="{{ user_group.id }}">{{ user_group.title }}</option>
        {% endfor %}
        
        </select>
    <a href="/addtest/">添加</a>
    <a href="#" onclick="popupUrl('/addtest/?popup=ugID')">popup添加</a>
    </p>
    <script>
        function popupCallBack(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 popupUrl(url){
            window.open(url,"win_name","status=1,height:500,width:600,toolbar=0, resizeable=0");
        }
    </script>

</body>
</html>
test.html(初始页面)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>添加测试数据</h1>
    <form method="POST">
        {% csrf_token %}
        <input type="text" name="title">
        <input type="submit">
    </form>
</body>
</html>
add_test.html(popup添加页面)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正在关闭的popup页面</title>
</head>
<body>
    <script>
        // 将数据传送给发起popup的页面
        var data_dict = {{ data_dict|safe }}
        opener.popupCallBack(data_dict);
        window.close();
    </script>
</body>
</html>
popup_response.html(中间页面，调用callback函数)

第一步，访问初始页面，添加userinfo数据，此为test.html

第二步，通过popup添加用户组，此为add_test.html

 

第三步，添加完成，views.py判断是popup，返回popup_response.html，调用callback函数，callback函数把用户组修改为刚添加的值

  

 

posted @ 2018-04-26 15:06  fat39  阅读(558)  评论(0)    收藏  举报