在django中将自定义html添加到choicefield标签

I am struggling with a requirement now, I want to add an image to choice field label and I really dont have a clue how to do it. I am using django form wizard to render the form. Here is the image which shows what I want to achieve : 在django中将自定义html添加到choicefield标签

我现在正在努力满足要求,我想在选择字段标签上添加一个图像,我真的不知道如何做到这一点。我正在使用django表单向导来呈现表单。这是显示我想要实现的目标的图像:

And here is what I have got right now ( to make the radio buttons inline, I know it could be achieved through css): 在django中将自定义html添加到choicefield标签

这就是我现在所拥有的(使内置单选按钮,我知道它可以通过css实现):

Here is the forms.py:

这是forms.py:

from django import forms
from django.utils.translation import gettext as _


CHOICES=[('0','Pay by card'), ('1','Invoice')]




class PaymentForm(forms.Form):
    title = 'payment'
    payment_method = forms.ChoiceField(label = _("Payment Options"), choices=CHOICES, widget=forms.RadioSelect(), required = True)

I am rendering using wizard form:

我使用向导形式渲染:

 {{ wizard.form.payment_method.label_tag }}
                                {{ wizard.form.payment_method|safe }}
                                {{ wizard.form.payment.errors}}

Anyone has any suggestion for this apart from custom widget?

除了自定义小部件之外,任何人都对此有任何建议吗?

4 个解决方案

#1

1) Shortly (but i'm not sure) call a function where 'Pay by card' and return all <img>... that you need.

1)很快(但我不确定)调用“通过卡支付”并返回所有需要的所有在django中将自定义html添加到choicefield标签的函数。

2) You can make somthing like @Gahbu said

2)你可以像@Gahbu说的那样做

3)Long [Better, i think, but untested :( ]: Make a renderer:

3)长[更好,我认为,但未经测试:(]:制作渲染器:

from myapp.my_widgets import CardsRadioFieldRenderer

CARD_CHOICE = '0'

CHOICES=[(CARD_CHOICE,'Pay by card'), ('1','Invoice')]

class PaymentForm(forms.Form):
    title = 'payment'
    payment_method = forms.ChoiceField(label = _("Payment Options"), choices=CHOICES,widget=forms.RadioSelect(renderer=CardsRadioFieldRenderer), required = True)

# myapp/my_widgets.py

class CardRadioInput(RadioInput):
    def __init__(self, name, value, attrs, choice, index):
        self.name, self.value = name, value
        self.attrs = attrs
        choice_value = force_text(choice[0])
        self.choice_value = choice_value
        if choice_value == CARD_CHOICE:
            choice_label = force_text(self.get_html_for_card_choice())
        else:
            choice_label = force_text(choice[1])
        self.choice_label = choice_label
        self.index = index

   def get_html_for_card_choice(self):
        #some logic to get the images tags (<img ...> <img ...>)
        return text


class CardsRadioFieldRenderer(RadioFieldRenderer):
    def __getitem__(self, idx):
        choice = self.choices[idx] # Let the IndexError propogate
        return CardRadioInput(self.name, self.value, self.attrs.copy(), choice, idx)

#2

In your template do something like :

在您的模板中执行以下操作:

 {% for choice in wizard.form.payment_method.choices %}
    {{ choice.0 }} {# value #} {{ choice.1 }} {# value #}
    {% if choice.0 == PAYMENT_BY_PAYPAL %}
     ...
    {% endif %}
 {% endfor %}

You can also write :

你也可以这样写:

  {% for key, value in wizard.form.payment_method.choices %}
    {% if key == PAYMENT_BY_PAYPAL %}
     ...
    {% endif %}
 {% endfor %}

#3

Without a widget:

没有小部件:

from django.utils.safestring import mark_safe
CHOICES=[('0', mark_safe('Pay by card <img src="by_card.jpg"/>')),
         ('1', mark_safe('Invoice <img src="no_card.jpg"/>'))
]

Credit: setting help_text for each choice in a RadioSelect

Credit:为RadioSelect中的每个选项设置help_text

#4

If you want to tweak it from the template, you need to use the "safe" which tells Jinja not to escape it. like below

如果你想从模板中调整它,你需要使用“safe”来告诉Jinja不要逃避它。如下

{{ some_object.some_property|safe }}

Yet if you want to use it inside your python code while defining the form/modelform just use mark_safe as below.

然而,如果你想在你的python代码中使用它,同时定义表单/模型,只需使用mark_safe,如下所示。

mark_up = 'this is a <a href="http://www.google.com">link</a>'
choices = list()
choices.append(('some_id', mark_safe(mark_up)))
self.fields['some_field'].choices = choices

#1