[PYTHON] Implementierung des Dropdown-Menüs in Django
Implementierungsbild
Erstellen Sie so etwas, dass beim Klicken auf einen Buchstaben die Elemente in der unteren Ebene angezeigt werden. (Das obige hat ein Kontrollkästchen, aber vorerst möchte ich die DB-Daten in einer hierarchischen Struktur ohne Kontrollkästchen anzeigen.)
Implementierung 1 (Datum)
Bereiten Sie zunächst die zu verwendenden Daten vor. Bereiten Sie diesmal die Datenbank und die Daten so vor, dass die Reihenfolge Elternkategorie → Kinderkategorie → Enkelkategorie lautet (siehe Abbildung). Fügen Sie models.py Folgendes hinzu.
models.py
class CategoryIDModels(models.Model):
class Meta:
db_table = 'CategoryID'
CategoryID = models.CharField(
primary_key=True,
verbose_name='CategoryID',
blank=False,
null=False,
max_length=20,
default='',
)
Category_name = models.CharField(
verbose_name='Kategoriename',
blank=False,
null=False,
max_length=225,
default='',
)
class CategoryID2Models(models.Model):
class Meta:
db_table = 'CategoryID2'
CategoryID = models.CharField(
primary_key=True,
verbose_name='CategoryID',
blank=False,
null=False,
max_length=20,
default='',
)
Category_name = models.CharField(
verbose_name='Kategoriename',
blank=False,
null=False,
max_length=225,
default='',
)
ParentCategoryID = models.ForeignKey(
CategoryIDModels,
to_field='CategoryID',
verbose_name='Eltern-Kategorie',
on_delete=models.CASCADE,
null=True
)
class CategoryID3Models(models.Model):
class Meta:
db_table = 'CategoryID3'
CategoryID = models.CharField(
primary_key=True,
verbose_name='CategoryID',
blank=False,
null=False,
max_length=20,
default='',
)
Category_name = models.CharField(
verbose_name='Kategoriename',
blank=False,
null=False,
max_length=225,
default='',
)
ParentCategoryID = models.ForeignKey(
CategoryID2Models,
to_field='CategoryID',
verbose_name='Eltern-Kategorie',
on_delete=models.CASCADE,
null=True
)
CategoryIDmodels (übergeordnet) -> CategoryID2models (untergeordnet) -> CategoryID3models (Enkelkind) CategoryID2 und 3 legen die Spalte "CategoryID" der oberen Ebene als ForeignKey fest.
Die einzugebenden Daten sind wie folgt.
Bei der Eingabe von Daten sollten CategoryID2Models und CategoryID3Models auch die ParentCategoryID-Spalte festlegen. Informationen zu ForeignKey finden Sie in der offiziellen Dokumentation und unten.
Erstellen Sie mit Django ForeignKey ein Eins-zu-Viele-Modell
Implementierung 2 (HTML)
Als nächstes bereiten Sie die HTML-Seite vor. Erstellen Sie "Dropmenu.html" im Vorlagenordner des Projekts.
Dropmenu.html
<!DOCTYPE html>
{% load static %}
{% load Drop %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="{% static 'css/drop.css' %}" />
<title>{% block title %}DropMenu{% endblock %}</title>
</head>
<body>
{% csrf_token %}
{% for data in form %}
<span><p id="click_event" style="display:inline;">{{data.Category_name}}</p></span>
<ul>
{% for things in form_child|in_category:data.CategoryID %}
<li><p id="click_event2" style="display:inline;">{{things.Category_name}}</p>
<ul>
{% for thing in form_gchild|in_category:things.CategoryID %}
<li>{{thing.Category_name}}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
{% endfor %}
<script type="text/javascript">
$(function () {
//Übergeordnete Menüverarbeitung
$(document).on('click', '#click_event', function(){
$(this).parent().next('ul').slideToggle('fast');
});
//Untergeordnete Menüverarbeitung
$(document).on('click', '#click_event2', function(e){
$(this).parent().children('ul').slideToggle('fast');
e.stopPropagation();
});
});
</script>
</body>
</html>
Bitte spielen Sie unten mit CSS und gestalten Sie nach Ihren Wünschen.
drop.css
span {
display: block;
margin: 0 0 4px 0;
padding : 15px;
line-height: 1;
color :#fff;
background: #5200b7;
cursor :pointer;
}
li {
cursor: pointer;
border-bottom: 1px solid #5200b7;
color: #222;
}
Ein wichtiger Teil dieser Implementierung ist die Erstellung eines "benutzerdefinierten Vorlagenfilters". In der dritten Zeile {% load Drop%} in der HTML-Datei wird der benutzerdefinierte Vorlagenfilter gelesen. Ich werde den benutzerdefinierten Vorlagenfilter nicht im Detail erklären, aber ich habe meinen eigenen Filter erstellt, der in der Django-Vorlage verwendet werden kann. Sie müssen lediglich einen Ordner "Templatetags" in Ihrem Projekt erstellen und eine benutzerdefinierte Vorlagendatei erstellen.
Das Folgende ist eine benutzerdefinierte Vorlagendatei.
Project_folder/templatetags/Drop.py
register = template.Library()
@register.filter
def in_category(things, category):
return things.filter(ParentCategoryID=category)
Als Verarbeitungsinhalt werden DB-Daten im ersten Argument und CategoryID im zweiten Argument empfangen. Es ist so einfach, die empfangenen DB-Daten nach ParentCategoryID zu filtern und zurückzugeben.
Verwendung ist die 17. Zeile der HTML-Datei
python
{% for things in form_child|in_category:data.CategoryID %}
Ein benutzerdefinierter Vorlagenfilter wird auf die DB-Daten mit dem Namen form_child angewendet. Die Kategorie-ID von Kategorie-ID-Modellen wird als zweites Argument übergeben.
Bei dieser Geschwindigkeit ist es etwas schwierig zu verstehen. Schauen wir uns also die Daten an, die in views.py an die Vorlage übergeben wurden.
Implementierung 3 (Ansichten)
views.py
@login_required
def Dropmenu_date(request_val):
##Vorlage laden
template = loader.get_template('Dropmenu.html')
form = CategoryIDModels.objects.all().order_by('CategoryID')
form_child = CategoryID2Models.objects.all().order_by('CategoryID')
form_gchild = CategoryID3Models.objects.all().order_by('CategoryID')
context = {
'form': form,
'form_child': form_child,
'form_gchild': form_gchild,
}
return HttpResponse(template.render(context, request_val))
Wenn Sie danach Ansichten und Vorlagen in urls.py verknüpfen, sollte ein Dropdown-Menü angezeigt werden.
Recommended Posts