Neulich habe ich einen Artikel veröffentlicht "Implementieren einer Schaltfläche zum Hinzufügen eines Formulars in einem Django-Inline-Formularsatz". Wenn Sie das Bestellungsformular als Thema verwenden und nicht genügend detaillierte Zeilen vorhanden sind, können Sie die Anzahl der Zeilen mit der Schaltfläche "Zeile hinzufügen" erhöhen. Der wesentliche Teil war die Implementierung in jQuery, aber selbst beim Schreiben des Artikels hatte ich das Gefühl, dass das Schreiben nicht sehr gut war. (Trotzdem fällt es mir schwer, bis ich das schreiben kann, aber ...) Dieses Mal habe ich es etwas besser geschrieben, also werde ich es teilen.
Es gibt viele Gemeinsamkeiten mit dem vorherigen Code, aber ich habe ihn hier noch einmal eingefügt (https://github.com/sangou310/inlineformset_project_2.git). Im Artikel werden nur die erforderlichen Teile veröffentlicht.
Der problematische Teil ist der Teil, der in jQuery in der Vorlagendatei jutyu_form.html geschrieben ist (der Teil von <script> ~ </ script> in der zweiten Hälfte).
In Django werden meiner Meinung nach forms.py- und Vorlagendateien verwendet, um die Reihenfolge der Elemente des Formulars anzugeben. Im vorherigen Code bezieht sich die Reihenfolge des Schreibens von Elementen auch auf den jQuery-Teil. Die Sortierreihenfolge sollte in forms.py usw. angegeben werden, der jQuery-Teil sollte dem Hinzufügen von Zeilen gewidmet sein und die Sortierreihenfolge sollte wie an anderer Stelle angegeben sein. Ich möchte hier oder da nichts Ähnliches machen.
Die Verbesserung ist
--Wählen Sie das Element aus, das programmgesteuert geändert werden muss, ohne es direkt durch id anzugeben.
Informationen zur Verwaltung, die beim Hinzufügen von Zeilen zum Formularsatz erforderlich sind, finden Sie unter Letzter Artikel E3% 83% A9% E3% 82% A4% E3% 83% B3% E3% 83% 95% E3% 82% A9% E3% 83% BC% E3% 83% A0% E3% 82% BB% E3% 83% 83% E3% 83% 88% E3% 81% AF% E3% 81% A9% E3% 81% 86% E3% 81% AE% E3% 82% 88% E3% 81% 86% E3% 81% AB% E7% AE% A1% E7% 90% 86% E3% 81% 95% E3% 82% 8C% E3% 81% A6% E3% 81% 84% E3% 82% 8B% E3% 81% AE% Siehe E3% 81% 8B).
Die hinzuzufügende Zeile wird in eine Zeile in der HTML-Tabelle geschrieben, dh in <tr> ~ </ tr>
Es wird sein. Die Anmerkungsnummern im Code entsprechen den obigen Nummern.
jutyu/jyutu_form.html (Auszug)
jQuery(function ($) {
$("button#addForm").on("click", function () {
//1. 1. Ermitteln Sie die Anzahl der im Inline-Formularsatz enthaltenen Formulare (= TOTAL)._FORMS-Wert abrufen)
const totalManageElement = $("input#id_jutyudetail_set-TOTAL_FORMS");
const currentJutyuDetailCount = parseInt(totalManageElement.val());
//2. Kopieren Sie die erste Zeile (0.) des Formularsatzes und fügen Sie sie am Ende der Tabelle hinzu.
$("table#detail-table tbody tr:first-child").clone().appendTo("table#detail-table tbody");
//3. 3. Löschen Sie die Eingabe
$("table#detail-table tbody tr:last-child").find("select, input").each(function () {
//Löschen (ausschneiden), ohne zwischen Auswahl und Eingabe zu unterscheiden
$(this).val("");
$(this).prop("selected", false); //Es wird ohne es abgewählt. .. ..
$(this).prop("checked", false);
//4. ID der hinzugefügten Zeile,Schreibe den Namen um. Ex. id_jutyudetail_set-0-part → id_jutyudetail_set-1-part
var thisName = $(this).attr("name");
thisName = thisName.replace("-0-", "-" + currentJutyuDetailCount + "-");
$(this).attr("name", thisName);
$(this).attr("id", "id_" + thisName);
});
// ５．TOTAL_Erhöhen Sie die FORMEN um 1
$("input#id_jutyudetail_set-TOTAL_FORMS").val(currentJutyuDetailCount + 1);
});
});
Es geht mehr darum, Tabellenzeilen mit jQuery zu kopieren als mit Django. Es tut mir Leid. Für jQuery können Sie dies so tun! Bitte unterlassen Sie die Erklärung, da dies nur während der Überprüfung möglich war.
Das einzige, was Sie mit den Attributen in der kopierten Zeile herumspielen müssen, sind die Elemente "select" und "input" (in diesem Beispiel). Ich habe mich gefragt, wie ich es auswählen soll, aber als ich vorsichtig jede Zeile als Ziel $ (" table # detail-table tbody tr: last-child ") auswähle und es find about select und input auswähle Es schien einfach zu sein, also habe ich es versucht.
Löschen Sie danach für die ausgewählte Datei den Eingabeinhalt und schreiben Sie den Namen und die ID mit ".each" neu.
Eigentlich ist es vielleicht besser, den Inhalt des Clear zu ändern, je nachdem, welche Art von Attribut das Zielelement hat, aber es scheint harmlos zu sein, also mache ich dasselbe.
Als Ergänzung zu Django ist die in Schritt 2 zu kopierende Zeile die erste Zeile. Die erste Zeile, dh die 0. (Null) im Formularsatz, ist immer vorhanden, und die in den Attributen id und name enthaltenen Zahlen sind immer noch 0 (Null). Befolgen Sie daher Schritt 4, um die Zahlen einzugeben. Es wird als Markierung beim Ersetzen verwendet.
Es ist möglicherweise besser, einen regulären Ausdruck zu verwenden, um die Zielzeichenfolge beim Ersetzen anzugeben. Da dieser Teil jedoch zu einer charakteristischen Zeichenfolge ("-0-") wird, wird welche Art von regulärem Ausdruck verwendet Ich entschied mich für solides Schreiben, anstatt mir darüber Sorgen zu machen.
In Schritt 4 ist der Wert des ID-Attributs der Wert des Namensattributs, wobei am Anfang "id_" hinzugefügt wird. Daher wird die ID festgelegt, nachdem zuerst der Wert des Namens erstellt wurde.
Ich habe viel Wissen, dass ich jetzt nicht genug habe, deshalb denke ich, dass es besser ist, es schneller zu bewegen, als es auf coole Weise zu erzwingen. Ich kann es nicht tun, auch wenn ich es cool schreiben möchte (T_T) Ich würde mich freuen, wenn Sie mir sagen könnten, was falsch ist oder wie ich es besser schreiben kann.
Ich hoffe auch, dass es ein Hinweis für diejenigen ist, die unter der gleichen Sache leiden. Ist es nicht schwierig, weil Sie viel Wissen benötigen, bevor Sie sich an diesen Teil gewöhnen, der wahrscheinlich notwendig ist?
Recommended Posts