django - 如何使 RadioSelect 将图像作为单选值？

Question

我有以下表格:

class ReviewForm(forms.ModelForm):
class Meta:
    model = Review

    widgets = {
        'tipo' : forms.RadioSelect(),
    }

但是我想使用图像作为我的单选按钮的值，图像会根据选项而变化，如下所示:

<input type="radio" id="id_tipo_0" value="UP" name="tipo" /><img src="/images/thumb_up.gif"/>
<input type="radio" id="id_tipo_1" value="DOWN" name="tipo" /><img src="/images/thumb_DOWN.gif"/>

我不知道如何实现这一目标。

Answer 1

这个问题有一个很好的解决方案!

一个ModelChoiceField具有方法label_from_instance(self, obj)。 ModelChoiceField 中的每个选项都会调用此方法。

您可以使用以下方式覆盖 ModelChoiceField.label_from_instance:

def label_from_instance(obj):
    """
    Shows an image with the label
    """
    image = conditional_escape(obj.thumbnail_image.url)
    title = conditional_escape(obj.title)

    label = """<img src="%s" />%s""" % (image, title)

    return mark_safe(label)

注意:需要使用mark_safe，否则渲染器会转义img标签。务必将 conditional_escape 应用于用户输入值(标题和 url)。

如果您想使用常规的 ChoiceField，您只需将 HTML 添加到 choices 参数并添加 mark_safe。