Implémenter un bouton d'ajout de formulaire dans l'ensemble de formulaires en ligne Django

introduction

L'ensemble de formulaires en ligne de Django est idéal pour créer des relations parent-enfant, telles que la partie en-tête d'une commande d'achat (date, nom du client, etc.) et les détails de la commande (commande, quantité, etc.) qui lui sont associées. est. (Exemple manuscrit) Cependant, c'est un peu déroutant car vous aurez affaire à plusieurs formulaires à la fois avant de vous y habituer. De plus, dans l'exemple du bon de commande, la ligne aura autant de formes que le numéro défini au début pour une nouvelle entrée. Cependant, si vous manquez de tous les formulaires et que vous voulez une nouvelle ligne, vous devez implémenter vous-même l'opération supplémentaire. Pour cela, jQuery est absolument nécessaire.

Dans mon cas, je ne comprenais pas le jeu de formulaires en ligne et jQuery était sur le point d'être étudié, donc cela n'a pas fonctionné comme je m'y attendais et j'ai eu du mal. C'est facile une fois que vous avez tout compris. Comment puis-je ajouter une ligne? Je partagerai tout ce que j'ai appris.

Choses à faire

En fonction du formulaire de commande, utilisez jQuery pour implémenter un bouton pour ajouter un formulaire à l'ensemble de formulaires en ligne.

Je n'expliquerai pas les bases de Python et Django.

environnement

• python 3.6.9、 Django 3.0.8
• Bootstrap 4.5.0、 jQuery 3.5.1 slim

Production

Commençons par un ensemble de formulaires en ligne normal et voyons comment Django gère autant de formulaires. Dans le didacticiel officiel, Il est écrit ici (L'explication de l'ensemble de formulaires, mais la gestion des formulaires est également dans l'ensemble de formulaires en ligne. Ce sera pareil).

La source est mise ici. Veuillez saisir les données "Client" et "Produit" depuis l'écran de gestion.

Le modèle d'affichage du formulaire est le suivant. (Extrait)

jutyu_form.html (extrait)

<form action="" method="POST">
    {{ form }}
    <hr>
    {{ formset.management_form }}
    <div id="detail-area">
        {% for detail in formset %}
            {{ detail.as_table }}
            <br>
        {% endfor %}
    </div>
    {% csrf_token %}
    <button class="btn btn-primary" type="submit">sauvegarder</button>
</form>

{{form}} affiche la "date de commande" et le "client" dans la partie en-tête. La partie écrite dans le langage de modèle de Django est convertie en HTML pour l'affichage Web. Comment cette pièce est-elle convertie? Essayez d'afficher la source de la page dans votre navigateur. Django a écrit beaucoup de choses. ↓ (je mets des notes, des sauts de ligne, etc.)

<!-- {{ form }}Contenu de-->
<tr>
    <th><label for="id_jutyu_date">Date de commande:</label></th>
    <td>
        <input type="text" name="jutyu_date" value="2020-07-02" required id="id_jutyu_date">
        <input type="hidden" name="initial-jutyu_date" value="2020-07-02" id="initial-id_jutyu_date">
    </td>
</tr>
<tr>
    <th><label for="id_customer">client:</label></th>
    <td>
        <select name="customer" required id="id_customer">
        <option value="" selected>---------</option>
        <option value="1">Showa Kogyo</option>
        <option value="2">Heisei Seisakusho</option>
        </select>
    </td>
</tr>

Il semble que «» et «» soient entourés de «» de sorte qu'ils soient alignés horizontalement. De plus, la valeur initiale de la date de commande est enregistrée avec l'attribut masqué. Le client m'a donné une boîte selece sans rien préciser. La valeur initiale n'est pas sélectionnée "---------".

Écrivez simplement un mot «{{form}}» et il sera converti en HTML approprié. Ce sera très utile. Cependant, pour le dire autrement, si vous voulez afficher quelque chose de différent de la conversion de Django, par exemple, si vous voulez un espace au lieu de ":" à la fin du nom de l'étiquette, ou si vous voulez que l'étiquette et le champ soient alignés verticalement, spécifiez-le dans le modèle Il n'y a pas une telle chose, donc je dois prendre une autre méthode.

Comment le jeu de formulaires en ligne est-il géré?

Jetons un coup d'œil à la partie du jeu de formulaires en ligne. Le formset en ligne est instancié dans la vue et transmis au modèle avec le nom «formset».

Cette partie du modèle

{{ formset.management_form }}
<div id="detail-area">
    {% for detail in formset %}
        {{ detail.as_table }}
        <br>
    {% endfor %}
</div>

Il a été converti en HTML comme ça. ↓ (je mets des notes, des sauts de ligne, etc.) Il a considérablement augmenté. Il semble que la clé de ce thème se cache dans les informations qui augmentent de diverses manières.

<!-- {{ formaset.management_form }}Contenu de-->
<input type="hidden" name="jutyudetail_set-TOTAL_FORMS" value="1" id="id_jutyudetail_set-TOTAL_FORMS">
<input type="hidden" name="jutyudetail_set-INITIAL_FORMS" value="0" id="id_jutyudetail_set-INITIAL_FORMS">
<input type="hidden" name="jutyudetail_set-MIN_NUM_FORMS" value="0" id="id_jutyudetail_set-MIN_NUM_FORMS">
<input type="hidden" name="jutyudetail_set-MAX_NUM_FORMS" value="1000" id="id_jutyudetail_set-MAX_NUM_FORMS">

<div id="detail-area">
<tr>
    <th><label for="id_jutyudetail_set-0-part">les pièces:</label></th>
    <td>
        <select name="jutyudetail_set-0-part" id="id_jutyudetail_set-0-part">
        <option value="" selected>---------</option>
        <option value="1">111-222 /Joint en acier inoxydable</option>
        <option value="2">333-444 /Joint torique</option>
        </select>
    </td>
</tr>
<tr>
    <th><label for="id_jutyudetail_set-0-quantity">Quantité de commande:</label></th>
    <td><input type="number" name="jutyudetail_set-0-quantity" id="id_jutyudetail_set-0-quantity"></td>
</tr>
<tr>
    <th><label for="id_jutyudetail_set-0-DELETE">Effacer:</label></th>
    <td>
        <input type="checkbox" name="jutyudetail_set-0-DELETE" id="id_jutyudetail_set-0-DELETE">
        <input type="hidden" name="jutyudetail_set-0-id" id="id_jutyudetail_set-0-id">
        <input type="hidden" name="jutyudetail_set-0-jutyu_head" id="id_jutyudetail_set-0-jutyu_head">
    </td>
</tr>
<br>
</div>

TOTAL_FORMS est le nombre de formulaires inclus

Il est écrit en HTML créé à partir de {{formset.management_form}}.

<input type="hidden" name="jutyudetail_set-TOTAL_FORMS" value="1" id="id_jutyudetail_set-TOTAL_FORMS">

Il y a un attribut caché «» avec un long id. Cette ligne représente le nombre de formulaires contenus dans l'ensemble de formulaires en ligne, où valeur =" 1 " est. Dans ce cas, il s'agit d'une ligne.

Chaque champ a un identifiant qui vous indique à quel formulaire il appartient.

Et chaque champ? Par exemple, le code HTML de la boîte de sélection pour sélectionner une pièce ressemble à ceci.

<tr>
    <th><label for="id_jutyudetail_set-0-part">les pièces:</label></th>
    <td>
        <select name="jutyudetail_set-0-part" id="id_jutyudetail_set-0-part">
        <option value="" selected>---------</option>
        <option value="1">111-222 /Joint en acier inoxydable</option>
        <option value="2">333-444 /Joint torique</option>
        </select>
    </td>
</tr>

Il se compose de «» et «» et a un attribut d'identifiant et de nom commun. En regardant id, cela signifie quelque chose comme ça. Cela semble long, mais c'est régulier. L'attribut name n'a tout simplement pas d''id_ '. La partie ** id_jutyudetail_set - ** a également été utilisée dans TOTAL_FORMS. Ceci est le modèle original ** Jutyu Detail ** dans toutes les lettres minuscules. Voilà le décor. De plus, j'ai découvert plus tôt que le nombre de formulaires inclus dans l'ensemble de formulaires en ligne est un. Les nombres sont numérotés à partir de 0, donc c'est le 0e du formulaire, son champ ** partie **.

Ensuite, quel est l'identifiant à donner au champ de quantité de commande lors de l'ajout d'un deuxième formulaire, qui n'est pas encore disponible?

Quel est l'identifiant du champ de quantité de commande dans le deuxième formulaire?

id="id_jutyudetail_set-0-quantity"

Si c'est le cas, ça a l'air bien.

Aucun autre champ masqué requis

Il y en a deux que Django a ajoutés avec l'attribut hidden.

<input type="hidden" name="jutyudetail_set-0-id" id="id_jutyudetail_set-0-id">
<input type="hidden" name="jutyudetail_set-0-jutyu_head" id="id_jutyudetail_set-0-jutyu_head">

En regardant ʻid = `, c'est l'id du modèle JutyuDetail et le jutyu_head du champ de clé externe. J'ai utilisé «{{detail_form.as_table}}» dans le modèle par souci de simplicité, car Django a généré le HTML, y compris les champs qui ne sont pas affichés. La ligne que vous ajoutez n'a pas besoin d'inclure ces deux éléments.

Essayez de mettre en œuvre

Si vous écrivez la procédure pour ajouter une ligne de mots,

1. Obtenez le nombre de formulaires inclus dans l'ensemble de formulaires en ligne (= obtenez la valeur de TOTAL_FORMS).
2. Ajoutez chaque champ avec un identifiant qui inclut le nombre qui représente le nombre.
3. Augmentez TOTAL_FORMS de 1.

Maintenant, supposons que vous obteniez la valeur de TOTAL_FORMS et qu'elle soit 3. Il existe des formes 0, 1 et 2. Le formulaire nouvellement ajouté aura l'ID de ʻid_jutyudetail_set-3-field name`.

Je suis désolé. J'étudie jQuery et je ne suis pas confiant, mais je peux l'écrire comme suit.

{% block extrajs %}
    <script>
        jQuery(function ($) {
            // 1.Obtenez le nombre de formulaires inclus dans l'ensemble de formulaires en ligne (= TOTAL)_Obtenir la valeur FORMS)
            var totalManageElement = $("input#id_jutyudetail_set-TOTAL_FORMS");
            var currentJutyuDetailCount = parseInt(totalManageElement.val());

            //Lorsque vous appuyez sur le bouton "Ajouter une ligne"
            //2. Ajoutez chaque champ avec un identifiant contenant le nombre qui représente le nombre
            $("button#addForm").on("click", function () {
                //les pièces
                var partElement = $("<select>", {
                    name: "jutyudetail_set-" + currentJutyuDetailCount + "-part",
                    id: "id_jutyudetail_set-" + currentJutyuDetailCount + "-part",
                });
                partElement.append($("<option>").html("---------").val(""));
                {% for part in part_list %}
                    partElement.append($("<option>").html("{{ part }}").val("{{ part.pk }}"));
                {% endfor %}
                //Quantité de commande
                var quantityElement = $("<input>", {
                    type: "number",
                    name: "jutyudetail_set-" + currentJutyuDetailCount + "-quantity",
                    id: "id_jutyudetail_set-" + currentJutyuDetailCount + "-quantity",
                });
                //Effacer
                var deleteElement = $("<input>", {
                    type: "checkbox",
                    name: "jutyudetail_set-" + currentJutyuDetailCount + "-DELETE",
                    id: "id_jutyudetail_set-" + currentJutyuDetailCount + "-DELETE",
                });
                //ajouter à
                $(partElement).appendTo("div#detail-area");
                $(quantityElement).appendTo("div#detail-area");
                $(deleteElement).appendTo("div#detail-area");
                $("<br>").appendTo("div#detail-area");

                // 3. TOTAL_Augmenter les FORMULAIRES de 1
                currentJutyuDetailCount += 1
                $("input#id_jutyudetail_set-TOTAL_FORMS").attr("value", currentJutyuDetailCount);
            });
        });
    </script>
{% endblock extrajs %}

L'affichage de l'étiquette est omis. Il est également bruyant que chaque ligne soit étiquetée. Si vous l'utilisez réellement, vous devriez penser à la conception même du formulaire.

Améliorations futures

Pour le moment, j'ai quelque chose qui fonctionne. Cependant, s'il y a plus de champs, c'est assez compliqué à écrire. Une réécriture est nécessaire même si l'ordre des champs change. Il devrait y avoir un moyen plus simple, juste parce que je ne sais pas, alors je vais en parler à nouveau.

référence

--Narito Blog "Django implémente le bouton d'ajout de formulaire dans l'ensemble de formulaires"

Recommended Posts

Implémenter un bouton d'ajout de formulaire dans l'ensemble de formulaires en ligne Django

Implémentation de boutons d'ajout de formulaire dans Django Inline Form Set Part2

Ajouter dynamiquement des champs de formulaire dans Django

Ajouter dynamiquement des champs aux objets Form avec Django

Définissez DateField du formulaire sur type = date dans Django

Définir le format de sortie du type DateTime dans le modèle Django

Implémenter la fonction de suivi dans Django

Définir des espaces réservés dans les champs de saisie dans Django

Enregistrer l'application Django dans le projet

Implémentation du bouton like dans Django + Ajax

Implémenter un modèle utilisateur personnalisé dans Django

[Django memo] Je souhaite définir à l'avance les informations de l'utilisateur connecté dans le formulaire.

Implémenter la possibilité de réserver ce qui se passe régulièrement dans la liste Django Todo