码迷,mamicode.com
首页 > 其他好文 > 详细

stark——pop功能(admin中添加功能)

时间:2018-08-25 11:42:55      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:名称   open()   win   利用   onclick   dem   document   分享图片   合格   

一、pop功能需要实现的功能和问题

1、如何在一对多和多对多字段后渲染 +
2、+对应的跳转路径是什么
3、保存添加记录同时,将原页面的对应的下拉菜单中添加该记录

  技术分享图片

二、window.open()方法详解

  open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

1、window.open()支持环境:

  JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

  重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。为了使您的代码清楚明白,请使用 Window.open(),而不要使用 open()。

2、基本语法: 

window.open(URL,name,features,replace)

  参数介绍:

URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。
name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
features:一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明。
replace:一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
        true - URL 替换浏览历史中的当前条目。
        false - URL 在浏览历史中创建新的条目。

3、窗口特征(Window Features)

channelmode=yes|no|1|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0	是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes|no|1|0	是否显示地址字段。默认是 yes。
menubar=yes|no|1|0	是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0	是否显示滚动条。默认是 yes。
status=yes|no|1|0	是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0	是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

4、应用示例:

<body>
    <p><button class="add" onclick="foo()">+</button></p>
    <script>
        function foo() {
            window.open("/addbook/", "", "width=400,height=400,top=100,left=200")
        }
    </script>
</body>

三、在一对多和多对多字段后渲染 +

1、调整form.html模板样式

<div class="container">
    <div class="row">
        <div class="col-md-6 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>
                        <a href="" style="position: absolute; right: -30px; top: 20px;"><span style="font-size: 28px">+</span></a>
                    </div>
                {% endfor %}
                <button type="submit" class="btn btn-default pull-right">提交</button>
            </form>
        </div>
    </div>
</div>

注意:

(1)绝对定位以父盒子为参考点

  父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点。

  因此在这里a标签以父级盒子div标签为参考点。top属性时,以父盒子左上角为参考点调整位置。

  技术分享图片

2、分析利用ModelForm组件构建的表单对象

  这个组件的功能就是把model和form组合起来。查看分析service/stark.py代码如下:

class ModelStark(object):
    """默认类,定制配置类"""
    def get_modelform_class(self):
        """用来获取modelform类"""
        if not self.modelform_class:
            # 如果没有值
            from django.forms import ModelForm
            from django.forms import widgets as wid

            class ModelFormDemo(ModelForm):
                class Meta:
                    model = self.model
                    fields = "__all__"

            return ModelFormDemo
        else:
            # 如果有值说明在用户已经自己定制过了,直接取值
            return self.modelform_class

    def add_view(self, request):
        """添加页面视图"""
        ModelFormDemo = self.get_modelform_class()
        form = ModelFormDemo()  # 实例化步骤提前不管是post请求还是get请求都会传递到模板中

        if request.method == "POST":
            form = ModelFormDemo(request.POST)
            if form.is_valid():  # 校验字段全部合格
                form.save()
                return redirect(self.get_list_url())  # 跳转到当前访问表的查看页面
                # 校验有错误返回页面,且包含了错误信息

        return render(request, "add_view.html", locals())

  ModelFormDemo是ModelForm的子类,form是ModelFormDemo实例对象。分析这个form对象:

for bound_field in form:   # 拿到每一个字段
    # print(type(bound_field))   # <class ‘django.forms.boundfield.BoundField‘>  django封装的数据
    # 通过这种方式查看这个数据类:from django.forms.boundfield import BoundField
    print(bound_field.field)
    print(type(bound_field.field))
    """
    <django.forms.fields.CharField object at 0x10d73a160>
    <class ‘django.forms.fields.CharField‘>
    <django.forms.fields.DateField object at 0x10d73a1d0>
    <class ‘django.forms.fields.DateField‘>
    <django.forms.fields.DecimalField object at 0x10d73a240>
    <class ‘django.forms.fields.DecimalField‘>
    <django.forms.models.ModelChoiceField object at 0x10d73a2b0>
    <class ‘django.forms.models.ModelChoiceField‘>
    <django.forms.models.ModelMultipleChoiceField object at 0x10d73a320>
    <class ‘django.forms.models.ModelMultipleChoiceField‘>
    """

  可以看到它的类型是<class ‘django.forms.boundfield.BoundField‘>一种django的封装数据。查看BoundField类可知它具有field属性。

  可以看出这个field属性的类型是CharField、ModelChoiceField、ModelMultipleChoiceField等Django内置字段类型。

  在forms组件中,ChoiceField是负责渲染select标签的;ModelChoiceField继承ChoiceField常用于渲染一对多的select标签;ModelMultipleChoiceField继承ModelChoiceField常用于渲染多对多的select标签。

3、调整仅给一对多和多对多字段添加 +

  service/stark.py:

class ModelStark(object):
    """默认类,定制配置类"""
    def add_view(self, request):
        """添加页面视图"""
        ModelFormDemo = self.get_modelform_class()
        form = ModelFormDemo()  # 实例化步骤提前不管是post请求还是get请求都会传递到模板中

        for bound_field in form:   # 拿到每一个字段
            print(bound_field.field)
            print(type(bound_field.field))
            from django.forms.models import ModelChoiceField  # ModelMultipleChoiceField继承ModelChoiceField
            if isinstance(bound_field.field, ModelChoiceField):  # 通过这个判断是否是一对多或多对多的字段对象
                bound_field.is_pop = True   # 给所有一对多、多对多对象添加is_pop这个属性

        if request.method == "POST":
            form = ModelFormDemo(request.POST)
            if form.is_valid():  # 校验字段全部合格
                form.save()
                return redirect(self.get_list_url())  # 跳转到当前访问表的查看页面
                # 校验有错误返回页面,且包含了错误信息

        return render(request, "add_view.html", locals())

  注意:ModelMultipleChoiceField是ModelChoiceField的子类,因此只要引入ModelChoiceField,判断bound_field.field是否是ModelChoiceField的对象就可以判断是否是一对一或一对多字段。其次通过bound_field.is_pop = True的方式为bound_filed对象添加属性。在form页面中可以通过判断字段对象的is_pop属性是否为真判断是否需要添加“+”。

  form.html:

-------代码部分省略
<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 href="" 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>

  显示效果:

  技术分享图片

四、“+”对应的跳转路径

 

 

五、保存添加记录同时,将原页面的对应的下拉菜单中添加该记录

 

stark——pop功能(admin中添加功能)

标签:名称   open()   win   利用   onclick   dem   document   分享图片   合格   

原文地址:https://www.cnblogs.com/xiugeng/p/9532592.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!