Django Forms:自定义html输出 [英] Django Forms: Customizing html Output
问题描述
我使用 django-crispy-forms 和bootstrap来呈现我的django表单。
I am using django-crispy-forms along with bootstrap to render my django forms.
我想使用像这里,但我不知道如何让我的HTML输出如下所示:
I want to use a file upload field like here, but I'm not sure how to get my html to output like this:
<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>
使用 ModelForm
这:
Using a ModelForm
gives me an output like this:
<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>
对于这样的表单:
所以我需要添加一个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
推荐答案
您可以这样做:
You can do it this way:
{{field.label | safe}} {%if field.field.required%}< span class =asteriskField> *< / span> {%endif%}
< /标签>
{%endif%}
< div class =controls>
< div class =fileupload fileupload-newdata-provide =fileupload>
< div class =fileupload-new thumbnailstyle =width:50px; height:50px;>< img src =http://www.placehold.it/50x50/EFEFEF/AAAAAA />< / div>
< div class =fileupload-preview fileupload-exists thumbnailstyle =width:50px; height:50px;>< / div>
< span class =btn btn-file>< span class =fileupload-new>选择图片< / span>< span class =fileupload-exists> span>< input type =filename ={{field.html_name}}id =id _ {{field.html_name}}value ={{field.value}}/><跨度>
< a href =#class =btn fileupload-existsdata-dismiss =fileupload>删除< / a>
< / div>
{%include'bootstrap / layout / help_text_and_errors.html'%}
< / div>
< / div>
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')
。
And then use it in your FormHelper as FileField('main_image')
.
这篇关于Django Forms:自定义html输出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!