实现简单的子页面传值给父页面
首先是form.html页面： 属于模板页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> 7 <script src="/static/jquery-3.3.1.min.js"></script> 8 <script src="/static/bootstrap/js/bootstrap.min.js"></script> 9 <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css"> 10 11 <title>欢迎</title> 12 <style> 13 input,select { 14 display: block; 15 width: 100%; 16 height: 34px; 17 padding: 6px 12px; 18 font-size: 14px; 19 line-height: 1.42857143; 20 color: #555; 21 background-color: #fff; 22 background-image: none; 23 border: 1px solid #ccc; 24 border-radius: 4px; 25 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 26 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 27 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 28 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 29 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 30 } 31 .error{ 32 color: red; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="container"> 38 <div class="row"> 39 <div class="col-md-6 col-xs-8 col-md-offset-3"> 40 <form action="" method="post" novalidate> 41 {% csrf_token %} 42 {% for fields in form %} 43 <div style="position: relative"> 44 <label for="">{{ fields.label }}</label> 45 {{ fields }}<span class="error pull-right">{{ fields.errors.0 }}</span> 46 47 {% if fields.is_pop %} 48 <a onclick="pop(\'{{ fields.url }}\')" style="position: absolute;right: -30px;top: 20px;"><span style="font-size: 20px"><i class="fa fa-user-plus"></i></span></a> 49 {% endif %} 50 51 </div> 52 {% endfor %} 53 <button class="btn btn-warning pull-right " style="margin-top: 5px" type="submit">提交</button> 54 </form> 55 </div> 56 </div> 57 </div> 58 59 <script> 60 function pop(url) { 61 window.open(url,"","width=600,height=400,top=100,left=100") 62 } 63 </script> 64 </body> 65 </html>
form.html
页面中的a标签属于一对多，或者多对对字段属性的提示链接，可以额外对齐表添加数据
用自带的onclick方法去替换了href 的链接地址，实现jQuery效果
其url路径是后端通过反向解析路径获取传送过来的url，
后端的add_view代码块：
1 def add_view(self, request): 2 ModelFormAdd = self.get_modelform_class() 3 form = ModelFormAdd() # 获取的form表单对象 4 for filed in form: 5 6 if isinstance(filed.field,ModelChoiceField): 7 filed.is_pop=True #设置标志属性 是TRUE就是一对多 多对多字段 8 model_name=filed.field.queryset.model._meta.model_name 9 app_name=filed.field.queryset.model._meta.app_label 10 11 _url=reverse("{0}_{1}_add".format(app_name,model_name)) 12 filed.url=_url+"?pop_id=id_{0}".format(filed.name) 13 14 15 if request.method == "POST": 16 form = ModelFormAdd(request.POST) 17 if form.is_valid(): # 验证通过 18 obj=form.save() 19 pop_id=request.GET.get("pop_id") 20 if pop_id: 21 22 res={"pk":obj.pk,"text":str(obj),"pop_id":pop_id} 23 24 return render(request,"pop.html",{"res":res}) 25 else: 26 return redirect(self.get_list_url()) 27 # 验证未通过 28 29 return render(request, "add_view.html", locals())
add.view
后台通过前端传递过去的含有pop_id标记的get链接获取当前选中的字段对象
待数据提交至后台，验证通过以后，存储到后台数据库，并将数据以字典形式返回给新的页面
新页面获取数据后 用window.opener的方法将数据传送给调用子页面的父页面，并关闭当前页面
父页面获取到数据，取出数据，并将其插入到指定标签里
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> 7 <script src="/static/jquery-3.3.1.min.js"></script> 8 <script src="/static/bootstrap/js/bootstrap.min.js"></script> 9 <title>添加数据</title> 10 11 </head> 12 <body> 13 {% include "form.html" %} 14 15 <script> 16 function pop_resp(pk,text,id) { 17 console.log(pk,text,id); 18 var $option=$(\'<option>\'); //<option></option> 19 $option.html(text); //<option>胡歌</option> 20 $option.val(pk); //<option value=\'3\'>胡歌</option> 21 $option.attr("selected","selected"); //<option value=\'3\'selected>胡歌</option> 22 $("#"+id).append($option) //追加到当前字段下 23 } 24 </script> 25 </body> 26 </html>
add_view.html
版权声明：本文为wen-kang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。