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

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 «

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