首先是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>
頁面中的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())
后台通過前端傳遞過去的含有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>