07----popo up 弹窗

 

 

 

弹窗:

绑定点击弹窗事件，js代码

弹出框的url设置

            from django.forms.models import ModelChoiceField

进入ModelChoiceField

可看到

 

queryset--->  关联字段绑定的数据，
print(bound_field.field.queryset)  # 每个字段里面的数据


<QuerySet [<Publish: 清华出版社>, <Publish: 北京出版社>, <Publish: 南京出版社>]>
<QuerySet [<Author: 柴静>, <Author: 韩寒>, <Author: 钱钟书>, <Author: 霍金>]>

queryset知识点补充

queryset本身封转model
可以直接.model找到关联表

print(bound_field.field.queryset.model)  # 每个字段里面的数据

<class 'app01.models.Publish'>
<class 'app01.models.Author'>

构建url

app_label=bound_field.field.queryset.model._meta.app_label      # 取app名
model_name=bound_field.field.queryset.model._meta.model_name    # 取当前表名

# 想构建的url格式： app01/publish/add/   需要拼接的url 通过字段找到关联的表
 _url ="%s_%s_add"%(app_label,model_name)
 print(_url)             #   app01_author_add
 print(reverse(_url))    # /stark/app01/author/add/  反转成真正的url

填写完数据，返回主页面并关闭窗口

form.save()    
# 含有返回值，返回添加的数据

obj=form.save()

添加完的数据渲染位置思路：

 流程

    (1) 判断当前form组件中哪些字段是一对多或者多对多类型，在显示样式后加一个事件标签
         
         form=ModelFormClass()
         for bound_field in form:  # form组件下的每一个字段信息对象：bound_field
            # print("field",type(bound_field))
            # print(bound_field.name,bound_field.field)
            if isinstance(bound_field.field, ModelChoiceField):
                bound_field.is_pop = True
                
                print(bound_field.field.queryset.model)
                app_label = bound_field.field.queryset.model._meta.app_label
                model_name = bound_field.field.queryset.model._meta.model_name
                _url = "%s_%s_add" % (app_label, model_name)

                bound_field.url = reverse(_url) + "?pop_id=id_%s" % bound_field.name
        return {"form":form}        
        
        form.html:
        
        
         <form action="" method="post" novalidate>
           
                {% for field in form %}
                    <div class="form-group" style="position: relative">
                        <label for="">{{ field.label }}</label>
                        <div class="input_style">
                            {{ field }}
                            <span class="error pull-right">{{ field.errors.0 }}</span>
                        </div>
                        {% if field.is_pop %}
                            <a onclick="pop('{{ field.url }}')" style="position: absolute;top: 24px;right: -23px" class="pop_btn"><span class="pull-right" style="font-size: 22px;">+</span></a>
                        {% endif %}
                    </div>
                {% endfor %}
                <div class="form-group">
                    <p><input type="submit" class="btn btn-default" ></p>
                </div>
            </form>
    
    (2) （子窗口页面）
        弹出页面的get请求：
            返回添加页面
        弹出页面的post请求：
            res={"pk":obj.pk,"text":str(obj),"pop_id":pop_id}
            import json
            return render(request,"stark/pop_res.html",{"res":json.dumps(res)})
        返回pop_response.html:
           <script>
                opener.foo('{{ res|safe }}');
                window.close();
            </script>

    (3)form.html(父窗口):
         
            <script>

                function foo(res) {
                    console.log(res);
                    var res=JSON.parse(res);
                    var ele_option=document.createElement("option");
                    ele_option.value=res.pk;
                    ele_option.innerHTML=res.text;
                    ele_option.selected="selected";
                    console.log(ele_option);

                    document.getElementById(res.pop_id).appendChild(ele_option)

                }
            </script>

 

ModelChoiceField：

    是form组件下的字段类型，而不是model类型