版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27695659/article/details/87971108
继前几篇文章，今天总结pop组件构成
在stark组件文件中的service 包stark.py中
修改add_view方法
class ModelStark(object):
def add_view(self, request):
ModelFormDemo = self.get_modelform_class()
form = ModelFormDemo()
for bfield in form:
from django.forms.boundfield import BoundField
from django.forms.models import ModelChoiceField
if isinstance(bfield.field, ModelChoiceField):
bfield.is_pop = True
print("=======>", bfield.field.queryset.model) # 一对多或者多对多字段的关联模型表
related_model_name = bfield.field.queryset.model._meta.model_name
related_app_label = bfield.field.queryset.model._meta.app_label
_url = reverse("%s_%s_add" % (related_app_label, related_model_name))
bfield.url = _url + "?pop_res_id=id_%s" % bfield.name
if request.method == "POST":
form = ModelFormDemo(request.POST)
if form.is_valid():
obj = form.save()
pop_res_id = request.GET.get("pop_res_id")
if pop_res_id:
res = {"pk": obj.pk, "text": str(obj), "pop_res_id": pop_res_id}
import json
return render(request, "pop.html", {"res": res})
else:
return redirect(self.get_list_url())
return render(request, "add_view.html", locals())
在视图模板中添加pop.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
window.opener.pop_response('{{ res.pk }}',"{{ res.text }}",'{{ res.pop_res_id }}')
window.close()
</script>
</body>
</html>
add.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>添加页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/jquery-3.3.1.js"></script>
<style>
input,select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.error{
color: red;
}
</style>
</head>
<body>
<h3>添加页面</h3>
{% include 'form.html' %}
<script>
function pop_response (pk,text,id) {
console.log(pk,text,id);
// 选择哪一个select标签
// option的文本值和value值
var $option=$('<option>');
$option.html(text);
$option.val(pk);
$option.attr("selected","selected") ;
$("#"+id).append($option)
}
</script>
</body>
</html>
form.html
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-8 col-md-offset-3">
<form action="" method="post" novalidate>
{% csrf_token %}
{% for field in form %}
<div style="position: relative">
<label for="">{{ field.label }}</label>
{{ field }} <span class=" error pull-right">{{ field.errors.0 }}</span>
{% if field.is_pop %}
<a onclick="pop('{{ field.url }}')" style="position: absolute;right: -30px;top: 20px"><span style="font-size: 28px">+</span></a>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn btn-default pull-right">提交</button>
</form>
</div>
</div>
</div>
<script>
function pop(url) {
window.open(url,"","width=600,height=400,top=100,left=100")
}
</script>
