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

Posted 2023-02-24

【中文标题】将自定义html添加到django中的choicefield标签

【英文标题】：Add custom html to choicefield label in django

【发布时间】：2013-07-18 18:47:36

【问题描述】：

我现在正在为一个需求而苦苦挣扎，我想在选择字段标签中添加一个图像，但我真的不知道该怎么做。我正在使用 django 表单向导来呈现表单。 这是显示我想要实现的目标的图像：

这是我现在得到的（为了使单选按钮内联，我知道可以通过 css 实现）：

这是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)

我正在使用向导表单进行渲染：

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

除了自定义小部件之外，有人对此有什么建议吗？

【问题讨论】：

取决于您如何呈现表单。如果您使用 form.as_p() 或类似的内置函数，则必须覆盖此行为。您也可以在 html 中手动完成表单。 docs.djangoproject.com/en/dev/topics/forms

我刚刚编辑了我的问题。

【参考方案1】：

没有小部件：

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"/>'))
]

信用：setting help_text for each choice in a RadioSelect

【参考方案2】：

1) 很快（但我不确定）调用一个函数，其中“通过卡付款”并返回您需要的所有 <img>...。

2) 你可以像@Gahbu 所说的那样做一些事情

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

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)

【讨论】：

好吧，即使我不确定是否可以实现第 1 点，但是 Gahbu 的解决方案现在对我不起作用，我将第 3 点保留为最后一个选项，我只是不确定是否有任何简单的解决方案可以实现这一点，所以想把它贴在这里。

【参考方案3】：

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

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

你也可以写：

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

【讨论】：

是的，我也是，见上文。

PAYMENT_BY_PAYPAL 是键名吗？我的问题中哪个是“0”？

是的，在你的情况下它是'0'，另一个是'1'。

【参考方案4】：

如果你想从模板中调整它，你需要使用告诉 Jinja 不要逃避它的“安全”。如下所示

 some_object.some_property|safe 

然而，如果您想在定义表单/模型表单时在 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