Thêm html tùy chỉnh vào nhãn choicefield trong django

Question

Tôi đang gặp khó khăn với yêu cầu bây giờ, tôi muốn thêm một hình ảnh vào nhãn trường lựa chọn và tôi thực sự không có một đầu mối làm thế nào để làm điều đó. Tôi đang sử dụng trình hướng dẫn biểu mẫu django để hiển thị biểu mẫu. Dưới đây là hình ảnh trong đó cho thấy những gì tôi muốn đạt được:

Và đây là những gì tôi đã có ngay bây giờ (để làm cho các nút radio inline, tôi biết nó có thể đạt được thông qua css):

đây là 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) 

tôi render sử dụng hình thức phù thủy:

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

Bất cứ ai có bất cứ đề nghị nào cho việc này ngoài tiện ích tùy chỉnh?

Answer 1

1) Không lâu (nhưng tôi không chắc chắn) gọi một chức năng mà 'Thanh toán bằng thẻ' và trả lại tất cả <img>... mà bạn cần.

2) Bạn có thể làm cho somthing như @Gahbu nói

3) Long [Better, tôi nghĩ rằng, nhưng chưa được kiểm tra :(]: Thực hiện một renderer:

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

Trong mẫu của bạn làm như sau:

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

Bạn cũng có thể viết:

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

Answer 3

Nếu không có một 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

Answer 4

Nếu bạn muốn TWE ak nó từ mẫu, bạn cần phải sử dụng "an toàn" mà nói với Jinja không để thoát khỏi nó. như bên dưới

{{ some_object.some_property|safe }} 

Tuy nhiên, nếu bạn muốn sử dụng nó bên trong mã python của bạn trong khi xác định biểu mẫu/modelform chỉ cần sử dụng mark_safe như dưới đây.

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