Personnalisation de Django formes avec RadioSelect widget

Donc je suis en utilisant jQuery UI pour peau les boutons de la radio mais je ne peux pas obtenir de Django pour rendre mon formulaire de la façon qu'il a à faire.

J'ai besoin de cette structure:

<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>

Donc, pour résumer ce que j'ai besoin de les boutons de la radio au sein d'une classe (de la radio), où ils ont un input et un label for.

Quand j'ai rendu le formulaire dans mon modèle avec {{ profile_form.notify_new_friends }} je reçois le texte suivant:

<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>

Qui est exactement ce que je veux, sauf pour la liste de pièces. J'ai donc essayé de boucler sur elle qui me donne les étiquettes de mise en forme différemment:

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

qui me donne:

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

Donc, le problème ici est qu'il cesse d'utiliser label for et commence à utiliser juste label de wrapp tout avec.

J'ai aussi essayé de faire quelque chose comme cela, mais alors le label et label_tag ne pas tout rendre.

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

Si quelqu'un sait comment je peux rendre cette correctement!?

Pour info, c'est mon forms.py:

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

docs.djangoproject.com/en/dev/ref/forms/widgets/#radioselect - avez-vous lu cela ?
oui, mais j'avais manqué la choice_label à obtenir l'étiquette de titre, mais, malheureusement, faire {{ radio.tag }} ne pas me fournir un IDENTIFIANT et donc je ne peux pas faire label for dont j'ai besoin pour le faire.
domaine id sont générés automatiquement, essayez, {{ domaine.auto_id }}
J'ai peut-être mal compris comment l'utiliser, mais non, ça ne veut pas me donner quelque chose de rendu.

OriginalL'auteur olofom | 2012-07-19

6

Dans mon code, j'ai découvert que le fait de changer le widget de
```
forms.RadioSelect
```
à
```
forms.RadioSelect(attrs={'id': 'value'})
```
comme par magie causes résultant tag valeur pour inclure le id attribut avec l'index de l'élément ajouté. Si vous utilisez
```
{% for radio in form.foo %}
    <li>
        {{ radio }}
    </li>
{% endfor %}
```
dans le formulaire, vous obtenez un label enroulé autour d'un input. Si vous voulez que le plus classique de l' input suivie par label, vous avez besoin pour ce faire:
```
{% for radio in form.value %}
    <li>
        {{ radio.tag }}
        <label for="value_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
    </li>
{% endfor %}
```
fonctionne parfaitement dans django 2.1. Je vous remercie.

OriginalL'auteur pdc

Malheureusement c'est plus compliqué que ce qu'il devrait être, il semble que vous devez remplacer au moins 2 classes: RadioRenderer et RadioInput. Les points suivants devraient vous aider à démarrer, mais vous pourriez avoir besoin de ruser un peu.

D'abord créer un bouton radio personnalisée widget de saisie. Le seul but de nous substitution de la méthode render est de se débarrasser de l'ennuyeux structure de Django applique (<label><input /></label>) où, au lieu que nous voulons la nôtre (<label /><input />):

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

Maintenant, nous avons besoin de remplacer RadioRenderer pour:

Forcer à utiliser notre radio personnalisée widget de saisie
Supprimer <li> wraping chaque champ de saisie et <ul> emballage tous les champs de saisie:

Quelque chose le long de ces lignes doit faire:

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]))

Enfin instruire Django personnalisées convertisseur

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

S'il vous plaît garder à l'esprit: Ce maintenant sorties boutons radio avec englobant <td> donc vous avez besoin pour construire une table autour de votre modèle, quelque chose le long de ces lignes:

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

OriginalL'auteur tnajdek

Car il ne semble pas être une bonne façon de le faire, j'ai choisi de réorganiser le code généré à l'aide de 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();

Ce fait aller à partir de:

<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>

et mon jQuery UI style fonctionne très bien.

Je pense que si il y a des possibilités de le faire sans javascript, nous devons éviter de js... en Particulier sur la page de chargement de moins bonnes performances, pire SEO. Si nous utilisons javascript pour la manipulation, il doit être dynamique manipulation qui sont la cause de la raison comme de l'interaction.
Je ne crois pas un JavaScript qui simplement refait le même contenu sur la page est susceptible d'influer sur le RÉFÉRENCEMENT. Cela mis à part, cette solution potentiellement fonctionne très bien dans l'admin de Django, où le RÉFÉRENCEMENT est hors de propos et de contrôle de la sortie HTML nécessiterait primordial de multiples Django classes comme mentionné dans tnajdek de réponse.

OriginalL'auteur olofom

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),
        }

OriginalL'auteur Bala Murugan

Vous devez vous connecter pour publier un commentaire.