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应用于用户输入值（标题和网址）。

如果您想使用常规ChoiceField，只需在choices参数中添加HTML，然后添加mark_safe。

Answer 2

您可以覆盖RadioSelect（和RadioFieldRenderer）类。

OR！你可以使用jquery（或类似的东西）动态插入你的img。

$(document).ready(function(){
  $("#id_tipo_0").after('<img src="/images/thumb_up.gif"/>')
  $("#id_tipo_1").after('<img src="/images/thumb_down.gif"/>')
});

Answer 3

如果你想使用Django表格渲染功能，你将不得不使用javascript来修改DOM，这将是一团糟，因为选项的名称是在输入标签之后呈现的，不包含在任何标签中......

如果您的表单没有任何其他标签，请继续，只需在示例中编写输入，仔细使用Django名称和无线电输入值，添加提交按钮，CSRF令牌等等，您将能够在视图中验证您的表单，就好像它是通过{{form.as_p}}呈现的

如何让RadioSelect将图像作为无线电值？

3 个答案: