![DRY]( "DRY")
本文介绍了自定义 Django ClearableFileInput 小部件的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 Django 模型中使用了 ImageField 来实现图像上传功能.ImageField 使用 ClearableFileInput 小部件，但它不提供我可以使用 CSS 自定义的格式良好的 html 标记.下面显示的是由 ClearableFileInput 呈现的 html 标记.
<label class="control-label " for="id_image">指导<div class="控件">目前:<a href="/media/ide.png">de.png</a><input type="checkbox" name="image_" id="image_"><label for="image_te">清除</label><br>改变:<input type="file" name="image_te" id="id_i" class="clearablefileinput">
我想要做的就是向这些元素添加自定义 css 类并根据需要更改顺序.如果有人能建议我解决这个问题，那就太好了.
解决方案
只需创建您自己的 Input 类并将渲染可调用更改为您想要的任何内容.例如，这是我添加的一个小头像.它既快速又脏，因为它不是 DRY，但它有一个目的:
class AvatarInput(ClearableFileInput):'''将输入文件渲染为头像，并删除'当前'的html'''template_with_initial = u'%(initial)s %(clear_template)s<br/>%(input_text)s: %(input)s'def render(self, name, value, attrs=None):替换 = {'input_text': self.input_text,'clear_template': '','clear_checkbox_label': self.clear_checkbox_label,}模板 = u'%(input)s'替换['输入'] = super(AvatarInput, self).render(name, value, attrs)如果值和 hasattr(value, "url"):模板 = self.template_with_initial替换['initial'] = (u'<img src="%s" width="60" height="60"></img>'% (escape(value.url)))如果不是 self.is_required:checkbox_name = self.clear_checkbox_name(name)checkbox_id = self.clear_checkbox_id(checkbox_name)替换['clear_checkbox_name'] = conditional_escape(checkbox_name)替换['clear_checkbox_id'] = conditional_escape(checkbox_id)替换['清除'] = CheckboxInput().render(checkbox_name, False, attrs={'id': checkbox_id})替换['clear_template'] = self.template_with_clear % 替换返回 mark_safe(模板 % 替换)
然后把它放到你的表单类 Meta 中:
类元:模型 = <你的模型>小部件 = {'您的字段名称':AvatarInput()
I have use ImageField in my django model to have the image upload facility. ImageField uses the ClearableFileInput widget but it does not provide well formatted html markup that i can customize using CSS. Shown bellow is the html markup that rendered by ClearableFileInput.
<div class="form-group" id="div_id">
<label class="control-label " for="id_image">
Guide
</label>
<div class="controls ">
Currently:
<a href="/media/ide.png">de.png</a>
<input type="checkbox" name="image_" id="image_">
<label for="image_te">
Clear
</label><br>
Change:
<input type="file" name="image_te" id="id_i" class="clearablefileinput">
</div>
</div>
Simply what i want to do is to add custom css classes to these elements and change the order as i want. It would be really great if someone can suggest me a solution to this.
解决方案
Just make your own Input class and alter the render callable to whatever you want. As an example, here's one I made to add in a little avatar. It's quick and dirty, in that it's not DRY, but it serves a purpose:
class AvatarInput(ClearableFileInput):
'''renders the input file as an avatar image, and removes the 'currently' html'''
template_with_initial = u'%(initial)s %(clear_template)s<br />%(input_text)s: %(input)s'
def render(self, name, value, attrs=None):
substitutions = {
'input_text': self.input_text,
'clear_template': '',
'clear_checkbox_label': self.clear_checkbox_label,
}
template = u'%(input)s'
substitutions['input'] = super(AvatarInput, self).render(name, value, attrs)
if value and hasattr(value, "url"):
template = self.template_with_initial
substitutions['initial'] = (u'<img src="%s" width="60" height="60"></img>'
% (escape(value.url)))
if not self.is_required:
checkbox_name = self.clear_checkbox_name(name)
checkbox_id = self.clear_checkbox_id(checkbox_name)
substitutions['clear_checkbox_name'] = conditional_escape(checkbox_name)
substitutions['clear_checkbox_id'] = conditional_escape(checkbox_id)
substitutions['clear'] = CheckboxInput().render(checkbox_name, False, attrs={'id': checkbox_id})
substitutions['clear_template'] = self.template_with_clear % substitutions
return mark_safe(template % substitutions)
Then just drop it into your form class Meta:
class Meta:
model = <your model>
widgets = {'your-field-name': AvatarInput()
这篇关于自定义 Django ClearableFileInput 小部件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！