[PYTHON] Implementieren Sie eine Schaltfläche zum Hinzufügen eines Formulars im Django-Inline-Formularsatz

Einführung

Der Inline-Formularsatz von Django eignet sich genau zum Erstellen von Eltern-Kind-Beziehungen, z. B. des Kopfteils einer Bestellung (Datum, Kundenname usw.) und der damit verbundenen Bestelldetails (Bestellung, Menge usw.). ist. (Handschriftliches Beispiel) Bis Sie sich daran gewöhnt haben, ist dies jedoch etwas verwirrend, da Sie mehrere Formulare gleichzeitig bearbeiten müssen. Bei der Bestellung enthält die Zeile ein Formular für die neue Eingabe der am Anfang festgelegten Nummer. Wenn Ihnen jedoch alle Formulare ausgehen und Sie eine neue Zeile wünschen, müssen Sie den zusätzlichen Vorgang selbst implementieren. Dafür ist jQuery unbedingt erforderlich.

In meinem Fall verstand ich das Inline-Formular nicht und jQuery stand kurz vor dem Studium, sodass es nicht wie erwartet funktionierte und es mir schwer fiel. Es ist einfach, wenn Sie alles verstanden haben. Wie kann ich eine Zeile hinzufügen? Ich werde so viel teilen, wie ich gelernt habe.

Dinge die zu tun sind

Verwenden Sie basierend auf dem Bestellformular jQuery, um eine Schaltfläche zum Hinzufügen eines Formulars zum Inline-Formularsatz zu implementieren.

Ich werde die Grundlagen von Python und Django nicht erklären.

Umgebung

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

Produktion

Beginnen wir mit einem normalen Inline-Formularsatz und sehen, wie Django so viele Formulare verwaltet. Im offiziellen Tutorial Es wird hier geschrieben (Die Erläuterung des Formularsatzes, aber die Formularverwaltung befindet sich auch im Inline-Formularsatz. Es wird das gleiche sein).

Die Quelle ist hier einfügen. Bitte geben Sie die Daten "Kunde" und "Produkt" auf dem Verwaltungsbildschirm ein.

Die Vorlage zum Anzeigen des Formulars lautet wie folgt. (Auszug)

jutyu_form.html (Auszug)

<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">sparen</button>
</form>

{{form}} zeigt das "Bestelldatum" und "Kunde" im Kopfteil an. Der in Djangos Vorlagensprache geschriebene Teil wird für die Webanzeige in HTML konvertiert. Wie wird dieser Teil konvertiert? Versuchen Sie, die Seitenquelle in Ihrem Browser anzuzeigen. Django hat viele Dinge geschrieben. ↓ (Ich habe Notizen, Zeilenumbrüche usw. eingefügt.)

<!-- {{ form }}Inhalt von-->
<tr>
    <th><label for="id_jutyu_date">Bestelldatum:</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">Klient:</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>

Es scheint, dass "" und "" von "" umgeben sind, so dass sie horizontal ausgerichtet sind. Außerdem wird der Anfangswert des Bestelldatums mit dem ausgeblendeten Attribut aufgezeichnet. Der Kunde gab mir eine Auswahlbox, ohne etwas anzugeben. Der Anfangswert ist nicht ausgewählt "---------".

Schreiben Sie einfach ein Wort "{{form}}" und es wird in den entsprechenden HTML-Code konvertiert. Es wird sehr hilfreich sein. Um es anders herum auszudrücken: Wenn Sie etwas anderes als die Konvertierung von Django anzeigen möchten, z. B. wenn Sie ein Leerzeichen anstelle von ":" am Ende des Beschriftungsnamens möchten oder wenn Beschriftung und Feld vertikal ausgerichtet werden sollen, geben Sie es in der Vorlage an. Da es so etwas nicht gibt, muss ich eine andere Methode anwenden.

Wie wird der Inline-Formularsatz verwaltet?

Werfen wir einen Blick auf den Inline-Formularsatz. Das Inline-Formset wird in der Ansicht instanziiert und mit dem Namen 'formset' an die Vorlage übergeben.

Dieser Teil der Vorlage

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

Es wurde so in HTML konvertiert. ↓ (Ich habe Notizen, Zeilenumbrüche usw. eingefügt.) Es hat erheblich zugenommen. Es scheint, dass der Schlüssel zu diesem Thema in den Informationen verborgen ist, die auf verschiedene Weise zunehmen.

<!-- {{ formaset.management_form }}Inhalt von-->
<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">Teile:</label></th>
    <td>
        <select name="jutyudetail_set-0-part" id="id_jutyudetail_set-0-part">
        <option value="" selected>---------</option>
        <option value="1">111-222 /Edelstahlverbindung</option>
        <option value="2">333-444 /O Ring</option>
        </select>
    </td>
</tr>
<tr>
    <th><label for="id_jutyudetail_set-0-quantity">Bestellmenge:</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">Löschen:</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 ist die Anzahl der enthaltenen Formulare

Es ist in HTML geschrieben, das aus {{formset.management_form}} erstellt wurde.

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

Es gibt ein verstecktes Attribut "" mit einer langen ID. Diese Zeile stellt die Anzahl der Formulare dar, die im Inline-Formularsatz enthalten sind, wobei "value =" 1 "" ist. In diesem Fall ist es eine Zeile.

Jedes Feld hat eine ID, die angibt, zu welcher Form es gehört.

Was ist mit jedem Feld? So sieht beispielsweise der HTML-Code des Auswahlfelds zum Auswählen eines Teils aus.

<tr>
    <th><label for="id_jutyudetail_set-0-part">Teile:</label></th>
    <td>
        <select name="jutyudetail_set-0-part" id="id_jutyudetail_set-0-part">
        <option value="" selected>---------</option>
        <option value="1">111-222 /Edelstahlverbindung</option>
        <option value="2">333-444 /O Ring</option>
        </select>
    </td>
</tr>

Es besteht aus "" und "" und hat eine gemeinsame ID und ein gemeinsames Namensattribut. Wenn man sich id ansieht, bedeutet das so etwas. Es scheint lang zu sein, aber es ist regelmäßig. Das Namensattribut hat einfach kein 'id_'. Der Teil ** id_jutyudetail_set - ** wurde auch in TOTAL_FORMS verwendet. Dies ist das Originalmodell ** Jutyu Detail ** in allen Kleinbuchstaben. Das ist das Set. Außerdem habe ich zuvor herausgefunden, dass die Anzahl der im Inline-Formularsatz enthaltenen Formulare eins beträgt. Die Zahlen sind von 0 nummeriert, es ist also die 0te des Formulars, das Feld ** Teil **.

Welche ID sollte dann dem Feld für die Bestellmenge beim Hinzufügen eines zweiten Formulars zugewiesen werden, das noch nicht verfügbar ist?

Wie lautet die ID des Bestellmengenfelds im zweiten Formular?

id="id_jutyudetail_set-0-quantity"

Wenn ja, sieht es gut aus.

Keine weiteren versteckten Felder erforderlich

Es gibt zwei, die Django mit dem versteckten Attribut hinzugefügt hat.

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

Bei id = handelt es sich um die ID des JutyuDetail-Modells und den jutyu_head des externen Schlüsselfelds. Der Einfachheit halber habe ich in der Vorlage "{{detail_form.as_table}}" verwendet, da Django den HTML-Code einschließlich der nicht angezeigten Felder generiert hat. Die Zeile, die Sie hinzufügen, muss diese beiden nicht enthalten.

Versuchen Sie zu implementieren

Wenn Sie die Prozedur schreiben, um eine Zeile in Worten hinzuzufügen,

1. Ermitteln Sie die Anzahl der im Inline-Formularsatz enthaltenen Formulare (= Ermitteln Sie den Wert von TOTAL_FORMS).
2. Fügen Sie jedem Feld eine ID hinzu, die die Nummer enthält, die die Nummer darstellt.
3. Erhöhen Sie TOTAL_FORMS um 1.

Angenommen, Sie erhalten den Wert von TOTAL_FORMS und es ist 3. Es gibt 0, 1 und 2 Formen. Das neu hinzugefügte Formular hat die ID "id_jutyudetail_set-3-field name".

Es tut mir Leid. Ich studiere jQuery und bin nicht sicher, aber ich kann es wie folgt schreiben.

{% block extrajs %}
    <script>
        jQuery(function ($) {
            // 1.Ermitteln Sie die Anzahl der im Inline-Formularsatz enthaltenen Formulare (= TOTAL)._FORMS-Wert abrufen)
            var totalManageElement = $("input#id_jutyudetail_set-TOTAL_FORMS");
            var currentJutyuDetailCount = parseInt(totalManageElement.val());

            //Wenn die Schaltfläche "Zeile hinzufügen" gedrückt wird
            //2. Fügen Sie jedem Feld eine ID hinzu, die die Nummer enthält, die die Nummer darstellt
            $("button#addForm").on("click", function () {
                //Teile
                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 %}
                //Bestellmenge
                var quantityElement = $("<input>", {
                    type: "number",
                    name: "jutyudetail_set-" + currentJutyuDetailCount + "-quantity",
                    id: "id_jutyudetail_set-" + currentJutyuDetailCount + "-quantity",
                });
                //Löschen
                var deleteElement = $("<input>", {
                    type: "checkbox",
                    name: "jutyudetail_set-" + currentJutyuDetailCount + "-DELETE",
                    id: "id_jutyudetail_set-" + currentJutyuDetailCount + "-DELETE",
                });
                //hinzufügen
                $(partElement).appendTo("div#detail-area");
                $(quantityElement).appendTo("div#detail-area");
                $(deleteElement).appendTo("div#detail-area");
                $("<br>").appendTo("div#detail-area");

                // 3. TOTAL_Erhöhen Sie die FORMEN um 1
                currentJutyuDetailCount += 1
                $("input#id_jutyudetail_set-TOTAL_FORMS").attr("value", currentJutyuDetailCount);
            });
        });
    </script>
{% endblock extrajs %}

Die Anzeige des Etiketts entfällt. Es ist auch laut, dass jede Zeile beschriftet ist. Wenn Sie es tatsächlich verwenden, sollten Sie über das Formular-Design selbst nachdenken.

Zukünftige Verbesserungen

Zur Zeit habe ich etwas, das funktioniert. Wenn jedoch mehr Felder vorhanden sind, ist das Schreiben ziemlich mühsam. Es muss neu geschrieben werden, auch wenn sich die Reihenfolge der Felder ändert. Es sollte einen einfacheren Weg geben, nur weil ich es nicht weiß, also werde ich noch einmal darüber schreiben.

Referenz

--Narito Blog "Django implementiert die Schaltfläche zum Hinzufügen eines Formulars im Formularsatz"

Recommended Posts

Implementieren Sie eine Schaltfläche zum Hinzufügen eines Formulars im Django-Inline-Formularsatz

Implementieren von Formularschaltflächen zum Hinzufügen in Django Inline Form Set Part2

Fügen Sie in Django dynamisch Formularfelder hinzu

Fügen Sie Formularobjekten mit Django dynamisch Felder hinzu

Setzen Sie DateField des Formulars in Django auf type = date

Legen Sie das Ausgabeformat vom Typ DateTime in der Django-Vorlage fest

Implementieren Sie die Follow-Funktion in Django

Legen Sie Platzhalter in Eingabefeldern in Django fest

Registrieren Sie die Django-Anwendung im Projekt

Implementierung der Like-Schaltfläche in Django + Ajax

Implementieren Sie ein benutzerdefiniertes Benutzermodell in Django

[Django-Memo] Ich möchte die angemeldeten Benutzerinformationen im Voraus im Formular festlegen.

Implementieren Sie die Möglichkeit zu reservieren, was regelmäßig in der Django Todo-Liste passiert