如何为照片网格创建Django表单?

时间:2015-05-20 14:57:42

标签: python django django-forms django-templates django-views

我试图创建一个包含一到十张照片网格的Django表单。每张照片下方将有两个单选按钮组,一个用于指示观众是批准还是拒绝该照片,另一个用于指示照片是否需要旋转。 "批准"和"不"默认情况下将检查单选按钮:

(photo1)
Approve or reject?  Approve (x)  Reject( )
Rotate?  No (x)  Left ( )  Right ( )  Flip ( )

(photo2)
Approve or reject?  Approve (x)  Reject( )
Rotate?  No (x)  Left ( )  Right ( )  Flip ( )

(more photos...)

当观众提交表格时,我想检查每张照片的名称(例如" foobar.jpg")及其单选按钮,以确定它是否被批准或拒绝以及是否需要旋转。照片名称都包含在Python列表中,我通过识别特定目录中的照片名称来填充。

我不太了解如何定义一个表单,其中您有多个相同的表单"组件" (在这种情况下,照片加单选按钮)都在同一个表格内。我也不了解如何将照片名称合并到表单中,以便我可以显示照片。每个照片的名字都应该隐藏在一个隐藏的区域吗?我没有在Django文档中看到解决这种情况的任何内容。

这似乎不是Django Formsets的工作。另外,我不想使用ModelForms。谢谢你的帮助。

以下是我的视图,表单和模板的缩写版本:

# views.py
def review_photos(request, template):
    if request.method == "POST":
        form = ReviewPhotosForm(request.POST)  # Need another arg?
        if form.is_valid():
            # Extract each photo name and examine its corresponding radio buttons.
            pass
    else:
        photo_names = list_all_files_in_dir("/path/to/photo/dir")
        form = ReviewPhotosForm(photo_names=photo_names)
    return render_to_response(template, locals(), context_instance=RequestContext(request))

# forms.py
class ReviewPhotosForm(forms.Form):
    DECISION_CHOICES = ( ('approve', 'Approve'), ('reject', 'Reject') )
    ROTATE_CHOICES = ( ('none,', 'None'), ('right', 'Right'), ('left', 'Left'), ('flip', 'Flip') )

    def __init__(self, *args, **kwargs):
        photo_names = kwargs.pop('photo_names')
        super(ReviewPhotosForm, self).__init__(*args, **kwargs)
        for name in photo_names:
            self.fields[???] = forms.ChoiceField(
                label = 'Approve or reject?',
                choices = self.DECISION_CHOICES,
                widget = forms.RadioSelect(renderer=widget.HorizontalRadioRenderer),
                initial = 'approve')

            self.fields[???] = forms.ChoiceField(
                label = 'Rotate?',
                choices = self.ROTATE_CHOICES,
                widget = forms.RadioSelect(renderer=widget.HorizontalRadioRenderer),
                initial = 'none')

# review_photos.html
<form action="." method="post">{% csrf_token %}
    <ul>
        <!-- How do I insert each photo's name into the form? -->
        {% for field in form %}
        <li>
            <img src="{{ photo_name }}" />  <!-- ??? -->
            <div id="decision">
                {{ ???.label }}
                {{ ??? }}
            </div>
            <div id="rotate">
                {{ ???.label }}
                {{ ??? }}
            </div>
        </li>
        {% endfor %}
    </ul>
    <input type="submit" value="Submit" />
</form>

1 个答案:

答案 0 :(得分:0)

相反,这完全是表单集的工作:&#39;多个相同的表单&#34;组件&#34;所有这些都在同一种形式下#39;正是它们的本质。

class ReviewPhotosForm(forms.Form):
    DECISION_CHOICES = ( ('approve', 'Approve'), ('reject', 'Reject') )
    ROTATE_CHOICES = ( ('none,', 'None'), ('right', 'Right'), ('left', 'Left'), ('flip', 'Flip') )

    # hidden field to associate radio buttons with a photo
    photo_name = forms.CharField(widget=forms.HiddenInput)

    approve = forms.ChoiceField(
        label='Approve or reject?',
        choices=self.DECISION_CHOICES,
         widget=forms.RadioSelect(renderer=widget.HorizontalRadioRenderer),
        initial='approve')

    rotate = forms.ChoiceField(
        label='Rotate?',
        choices=self.ROTATE_CHOICES,
        widget=forms.RadioSelect(renderer=widget.HorizontalRadioRenderer),
        initial='none')

视图:

def review_photos(request, template):
    ReviewPhotosFormSet = formset_factory(ReviewPhotosForm, extra=0)

    if request.method == "POST":
        formset = ReviewPhotosFormSet(request.POST)
        if formset.is_valid():
            # list of photos and radio buttons is in formset.cleaned_data
            pass
    else:
        photo_names = list_all_files_in_dir("/path/to/photo/dir")
        initial_data = [{'photo_name': name} for name in photo_names]

        form = ReviewPhotosForm(initial=initial_data)
    return render(request template, {'formset': formset})

模板:

<form action="." method="post">{% csrf_token %}
    {{ formset.management_form }}
    <ul>
        {% for form in formset %}
        <li> {{ form.photo_name }}
            <img src="{{ form.photo_name.value }}" />
            <div id="decision">
                {{ form.decision.label_tag }}
                {{ form.decision }}
                {{ form.decision.errors }}
            </div>
            <div id="rotate">
                {{ form.rotate.label_tag }}
                {{ form.rotate }}
                {{ form.rotate.errors }}
            </div>
        </li>
        {% endfor %}
    </ul>
</form>