1

django-crispy-formsとブートストラップを使用して、django フォームをレンダリングしています。

hereのようなファイル アップロード フィールドを使用したいのですが、html を次のように出力する方法がわかりません。

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
  <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
  <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>

a を使用するModelFormと、次のような出力が得られます。

<div id="div_id_my_id" class="control-group">
  <label class="control-label " for="id_my_id"> My Model Field</label>
  <div class="controls">
</div>

このようなフォームの場合:

class MyForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Div(
                Div('stuff', 'things' css_class='span6'),
                Div('main_image', 'my_id', css_class='span6' ),
            css_class='row-fluid'),
        )

    class Meta:
        model=MyForm

したがって、div、span を追加し、それらの属性の一部を変更する必要があります。この問題に直面したことがありますか？あなたのアイデアをありがとう！

4

1 に答える 1

4

次の方法で実行できます。

from crispy_forms.layout import Field

class FileField(Field):
    template = 'bootstrap/layout/file_field.html'

file_field.html

{% load crispy_forms_field %}

<div id="div_{{ field.auto_id }}" class="control-group{% if form_show_errors%}{% if field.errors %} error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
    {% if field.label %}
        <label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
            {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
        </label>
    {% endif %}

    <div class="controls">
        <div class="fileupload fileupload-new" data-provides="fileupload">
          <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
          <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
          <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" name="{{ field.html_name }}" id="id_{{ field.html_name }}" value="{{ field.value }}" /></span>
          <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
        </div>
        {% include 'bootstrap/layout/help_text_and_errors.html' %}
    </div>
</div>

そして、それを FormHelper で として使用しますFileField('main_image')。

于 2013-01-30T09:19:53.507 に答える