L'autre jour, j'ai posté un article "Implémentation d'un bouton d'ajout de formulaire dans un ensemble de formulaires en ligne Django". En utilisant le formulaire de saisie de commande comme thème, quand il n'y avait pas assez de lignes détaillées, vous pouviez augmenter le nombre de lignes avec le bouton "Ajouter une ligne". La partie essentielle était l'implémentation dans jQuery, mais même en écrivant l'article, j'ai senti que ce n'était pas une très bonne rédaction. (Pourtant, j'ai du mal jusqu'à ce que je puisse écrire ça, mais ...) Cette fois, je l'ai écrit un peu mieux, donc je vais le partager.
Il y a beaucoup de choses en commun avec le code précédent, mais je le remets ici (https://github.com/sangou310/inlineformset_project_2.git). Seules les pièces nécessaires seront affichées dans l'article.
La partie problématique est la partie écrite en jQuery dans le fichier modèle jutyu_form.html (la partie de <script> ~ </ script> dans la seconde moitié).
Dans Django, je pense que les fichiers forms.py et template sont utilisés pour spécifier l'ordre des éléments du formulaire. Dans le code précédent, l'ordre d'écriture des éléments est également lié à la partie jQuery. L'ordre de tri doit être spécifié dans forms.py etc., la partie jQuery doit être consacrée au processus d'ajout de lignes et l'ordre de tri doit être tel que spécifié ailleurs. Je ne veux pas faire quelque chose de similaire ici ou là.
L'amélioration est
--Sélectionnez l'élément qui doit être modifié par programme sans le spécifier directement par id.
{{formset}} etc. lors de l'affichage du formset dans le fichier modèle, écrivez-le vous-même.Pour les informations de gestion requises lors de l'ajout de lignes dans l'ensemble de formulaires, voir [Dernier article](https://qiita.com/3gou3/items/ffde3c787102972af6c3#%E3%82%A4%E3%83%B3% 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% FA% 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% Voir E3% 81% 8B).
La ligne à ajouter est écrite sur une ligne dans le tableau HTML, c'est-à-dire dans <tr> ~ </ tr>, donc
Ce sera. Les numéros d'annotation dans le code correspondent aux numéros ci-dessus.
jutyu/jyutu_form.html (extrait)
jQuery(function ($) {
$("button#addForm").on("click", function () {
//1. 1. Obtenez le nombre de formulaires inclus dans l'ensemble de formulaires en ligne (= TOTAL)_Obtenir la valeur FORMS)
const totalManageElement = $("input#id_jutyudetail_set-TOTAL_FORMS");
const currentJutyuDetailCount = parseInt(totalManageElement.val());
//2. Copiez la première ligne (0e) du jeu de formulaires et ajoutez-la à la fin du tableau.
$("table#detail-table tbody tr:first-child").clone().appendTo("table#detail-table tbody");
//3. 3. Effacer l'entrée
$("table#detail-table tbody tr:last-child").find("select, input").each(function () {
//Effacer (découper) sans faire la distinction entre sélection et entrée
$(this).val("");
$(this).prop("selected", false); //Il sera désélectionné sans lui. .. ..
$(this).prop("checked", false);
//4. Id de la ligne ajoutée,Réécrivez le nom. 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_Augmenter les FORMULAIRES de 1
$("input#id_jutyudetail_set-TOTAL_FORMS").val(currentJutyuDetailCount + 1);
});
});
Il s'agit plus de copier des lignes de table avec jQuery que Django. Je suis désolé. Pour jQuery, vous pouvez le faire de cette façon! Veuillez vous abstenir de l'explication car cela n'a été possible que pendant la vérification.
La seule chose que vous devez manipuler avec les attributs de la ligne copiée est les éléments select et ʻinput(dans cet exemple). Je me demandais comment le sélectionner, mais quand je sélectionne doucement chaque ligne comme cible$ (" table # detail-table tbody tr: last-child ")et que je la sélectionnefind about select et ʻinput Cela m'a semblé facile, alors j'ai essayé.
Après cela, pour celui sélectionné, effacez le contenu d'entrée et réécrivez le nom et l'identifiant avec .each.
En fait, il peut être préférable de modifier le contenu du clair en fonction du type d'attribut de l'élément cible, mais cela semble inoffensif, donc je fais de même.
Pour compléter la partie relative à Django, la ligne à copier à l'étape 2 est la première ligne. La première ligne - c'est-à-dire la 0ème (zéro) ème sous la forme ensemble - existera toujours, et les nombres contenus dans les attributs id et name sont toujours 0 (zéro), alors suivez l'étape 4 pour entrer les nombres. Il sert de repère lors du remplacement.
Il peut être préférable d'utiliser une expression régulière pour spécifier la chaîne de caractères cible lors du remplacement, mais puisque cette partie devient une chaîne de caractères caractéristique (" -0- "), quel type d'expression régulière sera utilisé J'ai choisi une écriture solide plutôt que de m'en soucier.
À l'étape 4, la valeur de l'attribut id est la valeur de l'attribut name avec ʻid_` ajouté au début, donc l'id est défini après avoir créé la valeur de nom en premier.
J'ai beaucoup de connaissances que je n'en ai pas assez maintenant, donc je pense qu'il vaut mieux le déplacer plus vite que de le forcer de manière cool. Je ne peux pas le faire même si je veux l'écrire de manière cool (T_T) J'apprécierais que vous me disiez ce qui ne va pas ou comment mieux l'écrire.
J'espère aussi que ce sera un indice pour ceux qui souffrent de la même chose. N'est-ce pas difficile parce que vous avez besoin de beaucoup de connaissances avant de vous habituer à cette partie, ce qui sera probablement nécessaire?
Recommended Posts