djangoのchoicefieldラベルにカスタムhtmlを追加します

Question

私は今、要件に苦しんでいます。私は選択フィールドのラベルに画像を追加したいのです。私はフォームをレンダリングするために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}} 

誰もがこのカスタムウィジェットから離れて何か提案していますか？テンプレートで

Answer 1

1）まもなく（しかし、私はよく分からない）「カードでのお支払い」関数を呼び出します必要なすべて<img>...を返します。

2）@Gahbuが

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) 

Answer 2

のようなものを実行します。

{% 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 %} 

Answer 3

： はレンダラを作る

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

Answer 4

あなたがTWEしたい場合それをテンプレートから取り除くには、 "安全"を使用する必要があります。これは、Jinjaにエスケープしないように指示します。

{{ some_object.some_property|safe }} 

以下のようなしかし、あなただけの、以下のようにmark_safeを使用し、フォーム/のModelFormを定義しながら、あなたのPythonコード内でそれを使用したい場合。

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