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类型
07----popo up 弹窗的更多相关文章
- Django-choices字段值对应关系(性别)-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- win7(32 bit) + IE8 环境,IE8无法弹窗(错误提示:“此网页上的错误可能会使它无法正确运行”),有关的系统注册信息损坏——解决方法
错误截图如下: IE有关的系统注册信息损坏,导致IE无法正常弹窗. 解决办法:重新注册与IE有关的DLL文件,具体如下: 1.以管理员身份运行附件脚本(新建txt文件,将下面代码复制到txt文 ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
- javascript倒计时代码及倒计时弹窗
在前端开发中,难免会用到倒计时.如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始.这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等.而在活 ...
- react-native自定义Modal模态框|仿ios、微信弹窗RN版
前序 纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验.如:微信.支付宝.ios都有很成熟的一套弹窗UI展示场景. 最近一直沉迷在rea ...
- 开机时自动启动的AutoHotkey脚本 2019年07月08日19时06分
;;; 开机时自动启动的AutoHotkey脚本;; 此脚本修改时间 2019年06月18日20时48分;; 计时器创建代码段 ------------------------------------ ...
- jQuery的DOM操作实例(3)——创建节点&&编写一个弹窗
一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...
- Android重构与设计之路,从整理提示弹窗(SmartAlertPop)开始
封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...
- JavaScript弹窗
警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...
随机推荐
- ubuntu 18.04 64bit下如何安装python开发工具jupyterhub
注:这是多用户版本 1.安装依赖 sudo apt-get install npm nodes sudo apt-get install python3-distutils wget https:// ...
- JAVA基础补漏--文件读取
public class Test2 { public static void main(String[] args) throws IOException { FileInputStream fis ...
- Mysql binlog设置
一:Binlog文件信息 1. binlog基本定义:二进制日志,也成为二进制日志,记录对数据发生或潜在发生更改的SQL语句,并以二进制的形式保存在磁盘中: 2. 作用:MySQL的作用类似于Ora ...
- mybatis整合ehcache
知识点:mybatis整合encache缓存框架,缓存从数据库中,查询的数据,不使用mybatis自带的二级缓存 补充:github上Mybatis Ehcache 适配器包说明地址:http://w ...
- Graph_Master(连通分量_C_Trajan缩点+最小路径覆盖)
hdu_3861 题目大意:给定一张有向图,若<u,v>可达(u可以走到v,或者 v可以走到u),则<u,v>需被划分在统一城邦,问最小划分城邦数. 题解:比较裸的题,可以看出 ...
- 程序员清理xcode垃圾命令
xcrun simctl list devices xcrun simctl delete unavailable
- 使用cxf调用webservice
1.引入maven包 <dependency> <groupId>org.apache.cxf</groupId> <artifactId>cxf-rt ...
- STOMP协议规范【转】
STOMP协议规范英文原文:http://stomp.github.io/stomp-specification-1.2.html STOMP协议规范译文原文:http://simlegate.com ...
- zabbix自动化运维学习笔记(服务器配置)
继上次博主整理的安装后,这次是配置步骤 首先打开zabbix的安装web地址 http://xx.xx.xx.xx/zabbix/setup.php xx.xx.xx.xx是服务器的IP地址 由 ...
- 热备模式相关问题2.txt
--//上午测试热备模式相关问题,就是如果打开热备模式,如果中间的归档丢失,oracle在alter database end backup ;时并没有应用日志. --//虽然热备份模式文件头scn被 ...