6

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

カスタムウィジェットとは別に、これについて何か提案はありますか?

4

4 に答える 4

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

クレジット: RadioSelect の選択肢ごとに help_text を設定する

于 2014-01-23T01:23:11.360 に答える
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 %}
于 2013-07-19T13:25:14.230 に答える
2

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)
于 2013-07-19T13:40:31.003 に答える
0

テンプレートから微調整したい場合は、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
于 2017-01-10T12:21:14.820 に答える