Django champ choice avec checkbox

17 Nov

Dans ce petit tutoriel, je vous vous montrer comment changer le rendu d'un champ "choice" qui de base affiche un select pour le remplacer par l'affichage de checkbox.
Pour commencer nous allons créer notre champ choice dans notre model, je vais simplement créer un tuple contenant 2 valeurs:

PARKING = ( 
    (1, 'Privatif'),

    (2, 'Public'), 

)

Création d'un fichier forms.py

Nous allons créer un nouveau fichier à la racine de voitre application se nommant forms.py par convention. Pourquoi créons-nous ce fichier ?
Pour simplement mieux organiser notre code, il n'est pas obligatoire de créer ce fichier mais vivement recommandé.

Voici le code ci-dessous:

class ParkinkForm(forms.ModelForm):
    parking = forms.MultipleChoiceField(choices=model.PARKING)

Explications:

On crée une classe qui hérite de ModelForm du module forms de Django, ensuite nous allons overrider le champ de
notre modèle dans mon cas c'est parking et nous allons lui assigner un nouveau type de champ "MultipleChoiceField" en lui passant en paramètre la notre liste.

Voilà avec ça vous devez maintenant voir apparaitre des checkbox au lieu du champ select de base.

Intégrer dans l'administration de Django

Si vous voulez intégrer ce formulaire dans l'administration de auto généré de Django rien de plus simple, il suffit
dans votre fichier admin.py dans la classe qui va gérer l'affichage de votre modèle dans l'administration ajouter l'attribut form
Exemple:

class ParkingAdmin(admin.ModelAdmin):

    form = ParkingForm

Voilà c'est assez simple pour intégrer notre formulaire custom dans l'administration et voici le resultat:

remplacement select par des checbox

Ajouter un Widget

Pour aller un petit peu plus loin, j'aurais besoin lors de du clique sur la checkbox public d'afficher un champ de texte (texarea), qui me permettra d'ajouter les adresses des parkings.
Pour ça nous allons créer notre propre widget pour nos checkbox qui nous permettra d'insérer du code JS et CSS.
Nous allons créer un fichier widgets.py, ce n'est pas obligatoire mais c'est aussi une bonne pratique, ensuite nous allons créer notre widget voici le code:

class CheckboxDisplayParking(forms.CheckboxSelectMultiple):

    class Media:

        js = ('annuaire/checkboxDisplayParking.js',)

        css = {
            'all': ('annuaire/checkboxDisplayParking.css',)
        }

Quelques explications:

Nous commençons à créer notre classe qui va hériter du widget CheckboxSelectMultiple, c'est celui qui est utiliser pour le rendu du champ CheckboxSelectMultiple, ensuite nous créons la classe Media qui nous permettra d'ajouter à la volé nos fichiers JS et CSS en initialisant leurs attributs.

Il nous reste plus qu'à faire un petit changement dans notre fichier forms.py précédement crée et rajouter le paramètre widget et lui assigner notre widget fraichement crée comme ci-dessous:

class ParkinkForm(forms.ModelForm):
    parking = forms.MultipleChoiceField(choices=model.PARKING, widget=CheckboxDisplayParking)

Voici le résultat:

Checkbox avec widget

Voilà j'espère que mes explications ont été assez claires, n'hésitez pas à poser des questions en commentaire

Publié le: Lundi 17 novembre 2014