रेडियो चयन चयन विजेट के साथ Django रूपों को अनुकूलित करना

Question

तो मैं skin the radio buttons पर jQuery UI का उपयोग कर रहा हूं लेकिन मुझे Django को अपना फॉर्म प्रस्तुत करने के तरीके को प्रस्तुत नहीं किया जा सकता है।

<table> 
    <tr> 
     <td><label for="notify_new_friends">Notify when new friends join</label></td> 
     <td class="radio"> 
      <input type="radio" name="notify_new_friends" id="notify_new_friends_immediately" value="1" checked="checked"/><label for="notify_new_friends_immediately">Immediately</label> 
      <input type="radio" name="notify_new_friends" id="notify_new_friends_never" value="0"/><label for="notify_new_friends_never">Never</label> 
     </td> 
    </tr> 
</table> 

तो संक्षेप में प्रस्तुत करने के लिए कि मैं एक वर्ग (रेडियो) के भीतर रेडियो बटन की जरूरत है, जहां वे एक input और एक label for है:

मैं इस संरचना की आवश्यकता है।

<ul> 
    <li><label for="id_notify_new_friends_0"><input type="radio" id="id_notify_new_friends_0" value="0" name="notify_new_friends" /> Immediately</label></li> 
    <li><label for="id_notify_new_friends_1"><input type="radio" id="id_notify_new_friends_1" value="1" name="notify_new_friends" /> Never</label></li> 
</ul> 

ठीक है कौन क्या मैं इस सूची-भाग के अलावा हैं:

जब मैं {{ profile_form.notify_new_friends }} के साथ अपने टेम्पलेट में प्रपत्र प्रस्तुत करना मैं निम्नलिखित मिलता है।

{% for item in profile_form.notify_new_friends %} 
    {{ item }} 
{% endfor %} 

जो मुझे देता है:: तो मैं इस पर पाशन जो मुझे लेबल का प्रारूप अलग देता है की कोशिश की

<label><input type="radio" name="notify_new_friends" value="0" /> Immediately</label> 
<label><input type="radio" name="notify_new_friends" value="1" /> Never</label> 

तो यहां समस्या यह label for का उपयोग कर बंद हो जाता है और सिर्फ label यह wrapp के लिए प्रयोग कर शुरू होता है वह यह है कि सब के साथ

मैंने इस तरह कुछ करने का भी प्रयास किया, लेकिन फिर label और label_tag कुछ भी प्रस्तुत न करें।

{{ profile_form.notify_new_friends.0 }} 
{{ profile_form.notify_new_friends.0.label_tag }} 
{{ profile_form.notify_new_friends.0.label }} 

तो किसी को पता है कि कैसे मैं इस ठीक से प्रस्तुत कर सकते हैं !?

FYI करें, यह मेरा forms.py है:

self.fields['notify_new_friends'] = forms.ChoiceField(label='Notify when new friends join', widget=forms.RadioSelect, choices=NOTIFICATION_CHOICES) 

Answer 1

चूंकि यह यह करने के लिए एक अच्छा तरीका है मैं jQuery का उपयोग कर तैयार किए गए कोड को पुनर्व्यवस्थित करने के लिए चुना जा करने के लिए प्रतीत नहीं होता।

<ul> 
    <li><label for="id_notify_new_friends_0"><input type="radio" id="id_notify_new_friends_0" value="0" name="notify_new_friends" /> Immediately</label></li> 
    <li><label for="id_notify_new_friends_1"><input type="radio" id="id_notify_new_friends_1" value="1" name="notify_new_friends" /> Never</label></li> 
</ul> 

लिए:

<input type="radio" id="id_notify_new_friends_0" value="0" name="notify_new_friends" /><label for="id_notify_new_friends_0"> Immediately</label></li> 
<input type="radio" id="id_notify_new_friends_1" value="1" name="notify_new_friends" /><label for="id_notify_new_friends_1"> Never</label></li> 

और मेरे jQuery यूआई स्टाइल ठीक काम करता है

// First remove the ul and li tags 
$('.radio ul').contents().unwrap(); 
$('.radio li').contents().unwrap(); 
// Then move the input to outside of the label 
$('.radio > label > input').each(function() { 
    $(this).parent().before(this); 
}); 
// Then apply the jQuery UI buttonset 
$(".radio").buttonset(); 

यह इसे से जाना बना दिया।

Answer 2

मेरी कोड में मैं

forms.RadioSelect(attrs={'id': 'value'}) 

को

forms.RadioSelect 

से विजेट को बदलने कि जादुई आइटम संलग्न की अनुक्रमणिका के साथ id विशेषता शामिल करने के लिए जिसके परिणामस्वरूप tag मूल्य का कारण बनता है की खोज की। आप के रूप में

{% for radio in form.foo %} 
    <li> 
     {{ radio }} 
    </li> 
{% endfor %} 

का उपयोग करते हैं तो आप एक label एक input के चारों ओर लिपटा मिलता है।आप और अधिक परंपरागत inputlabel के बाद चाहते हैं, आप ऐसा करने की जरूरत:

{% for radio in form.value %} 
    <li> 
     {{ radio.tag }} 
     <label for="value_{{ forloop.counter0 }}">{{ radio.choice_label }}</label> 
    </li> 
{% endfor %} 

Answer 3

Try like this , I got it.. 

from django.forms.widgets import RadioFieldRenderer 
from django.utils.encoding import force_unicode 
from django.utils.safestring import mark_safe 


class RadioCustomRenderer(RadioFieldRenderer): 
    def render(self): 
     return mark_safe(u'%s' % u'\n'.join([u'%s' % force_unicode(w) for w in self])) 

in form 

widgets = { 
      'validity': forms.RadioSelect(renderer=RadioCustomRenderer), 
     } 

Answer 4

दुर्भाग्य से यह और अधिक जटिल की तुलना में यह होना चाहिए है, तो यह आपको कम से कम 2 वर्गों को ओवरराइड करने की जरूरत है लगता है: RadioRenderer और RadioInput। निम्नलिखित आरंभ करने में आपकी सहायता करनी चाहिए लेकिन आपको इसे थोड़ा छोटा करने की आवश्यकता हो सकती है।

पहले कस्टम रेडियो बटन इनपुट विजेट बनाएं।

:

class CustomRadioInput(RadioInput): 
    def render(self, name=None, value=None, attrs=None, choices=()): 
     name = name or self.name 
     value = value or self.value 
     attrs = attrs or self.attrs 
     if 'id' in self.attrs: 
      label_for = ' for="%s_%s"' % (self.attrs['id'], self.index) 
     else: 
      label_for = '' 
      choice_label = conditional_escape(force_unicode(self.choice_label)) 
      return mark_safe(u'%s<label%s>%s</label>' % (self.tag(), label_for, choice_label)) 

अब हम करने के क्रम में RadioRenderer ओवरराइड करने के लिए की जरूरत है: हम में से एकमात्र उद्देश्य अधिभावी विधि प्रस्तुत करना कष्टप्रद संरचना Django लागू करता है (<label><input /></label>) जहां बजाय हम हमारा चाहते हैं (<label /><input />) से छुटकारा पाने के लिए है

1. फोर्स यह हमारे कस्टम रेडियो इनपुट विजेट
2. उपयोग करने के लिए <li> हर एक इनपुट क्षेत्र wraping और <ul> निकालें सभी इनपुट क्षेत्रों लपेटकर:

इन पंक्तियों के साथ कुछ करना चाहिए: यह अब <td> इसलिए शामिल आप के साथ एक साथ रेडियो बटन आउटपुट:

class RadioCustomRenderer(RadioFieldRenderer): 
    def __iter__(self): 
     for i, choice in enumerate(self.choices): 
      yield CustomRadioInput(self.name, self.value, self.attrs.copy(), choice, i) 

    def __getitem__(self, idx): 
     choice = self.choices[idx] 
     return CustomRadioInput(self.name, self.value, self.attrs.copy(), choice, idx) 

    def render(self): 
     return mark_safe(u'%s' % u'\n'.join([u'%s' % force_unicode(w) for w in self])) 

अंत में Django कस्टम रेंडरर का उपयोग करने के

notify_new_friends = forms.ChoiceField(label='Notify when new friends join', widget=forms.RadioSelect(renderer=RadioCustomRenderer), choices=NOTIFICATION_CHOICES) 

कृपया ध्यान में रखना हिदायत अपने टेम्पलेट में इसके चारों ओर एक टेबल बनाने की आवश्यकता है, इन पंक्तियों के साथ कुछ:

<table> 
    <tr> 
    <td><label for="{{field.auto_id}}">{{field.label}}</label></td> 
    <td>{{ field.errors }} {{field}}</td> 
    </tr> 
</table>