Django Python Verschiebungstabelle
Ich habe untersucht und implementiert, wie das Scrollen von Tabellen mit HTML und CSS gesteuert wird, aber es gibt einige Dinge, die nicht funktionieren.
momentane Situation
Zum Zeitpunkt der Erstanzeige gibt es kein Problem, aber ...
Wenn Sie scrollen
Der Titelteil oben links ist transparent geworden und der Name wurde visualisiert. Datum und Tag sind ebenfalls transparent (lacht) Websites, auf die beim Erstellen der Tabelle verwiesen wird Referenzquelle: https://webliker.info/75964/ https://webliker.info/02035/ Ich habe viele andere gesehen
Ich habe wegen des Problems hier ein paar Stunden lang recherchiert, aber ich habe es nicht verstanden, also lasse ich es für einen Moment (lacht)
Zusätzlich haben wir für jede Einrichtung eine Anzeige implementiert. Ich habe einen Zeitplan erstellt, um das Ganze anzuzeigen. Durch Hinzufügen der Einrichtungs-ID am Ende der URL Ich habe eine Kopie von Ansichten und HTML zur Anzeige für jede Einrichtung erstellt.
Dies wurde sofort erledigt
schedule/urls.py
from django.urls import path, include
from .views import monthschedulefunc, homeschedule, scheduleUpdatefunc, kiboulistfunc, KibouCreate, KibouUpdate, KibouDelete, schedulecreatefunc, monthschedulefilterfunc
from django.conf import settings
from django.conf.urls.static import static
app_name = 'schedule'
urlpatterns = [
path('home/', homeschedule, name='homeschedule'),
path('monthschedulefilter/<int:year_num>/<int:month_num>/<int:shisetsu_num>', monthschedulefilterfunc, name='monthschedulefilter'),
path('monthschedule/<int:year_num>/<int:month_num>/', monthschedulefunc, name='monthschedule'),
path('update/<int:pk>', scheduleUpdatefunc, name='update'),
path('schedulecreate/<int:year_num>/<int:month_num>/', schedulecreatefunc, name='schedulecreate'),
path('kiboulist/', kiboulistfunc, name='KibouList' ),
path('kiboucreate/', KibouCreate.as_view(), name='KibouCreate'),
path('kibouupdate/<int:pk>', KibouUpdate.as_view(), name='KibouUpdate'),
path('kiboudelete/<int:pk>', KibouDelete.as_view(), name='kibouDelete'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
/views.py
def monthschedulefilterfunc(request,year_num,month_num,shisetsu_num):
user_list = User.objects.all()
profile_list = Profile.objects.select_related().values().order_by('hyoujijyun')
year, month, shisetsu = int(year_num), int(month_num), int(shisetsu_num)
shisetsu_object = Shisetsu.objects.filter(id = shisetsu)
shisetsu_all_object = Shisetsu.objects.all()
shift_object = Shift.objects.all()
object_list = Schedule.objects.filter(year = year, month = month).order_by('user', 'date')
month_total = Schedule.objects.select_related('User').filter(year = year, month = month).values("user").order_by("user").annotate(month_total_worktime = Sum("day_total_worktime"))
#Ermitteln Sie die Anzahl der Tage im Schichtbereich
enddate = datetime.date(year,month,20)
startdate = enddate + relativedelta(months=-1)
kaisu = enddate - startdate
kaisu = int(kaisu.days)
kikan = str(startdate) +"～"+ str(enddate)
#Machen Sie eine Liste von Daten und Tagen
hiduke = str(startdate)
date_format = "%Y-%m-%d"
hiduke = dt.strptime(hiduke, date_format)
weekdays = ["Mond","Feuer","Wasser","Holz","Geld","Boden","Tag"]
calender_object = []
youbi_object = []
for i in range(kaisu):
hiduke = hiduke + timedelta(days=1)
calender_object.append(hiduke)
youbi = weekdays[hiduke.weekday()]
youbi_object.append(youbi)
kaisu = str(kaisu)
context = {
'year': year,
'month': month,
'kikan': kikan,
'object_list': object_list,
'user_list': user_list,
'shift_object': shift_object,
'calender_object': calender_object,
'youbi_object': youbi_object,
'kaisu': kaisu,
'shisetsu_object': shisetsu_object,
'month_total' : month_total,
'profile_list' : profile_list,
'shisetsu_all_object' : shisetsu_all_object,
}
return render(request,'schedule/monthfilter.html', context)
schedule/monthfileter.html
{% extends 'schedule/base.html' %}
{% load static %}
{% block customcss %}
<link rel="stylesheet" href="{% static 'schedule/month.css' %}">
{% endblock customcss %}
{% block header %}
<ul class="page">
{% ifnotequal month 1 %}
<a href="{% url 'schedule:monthschedule' year month|add:'-1' %}" class="btn-info btn active">Im vergangenen Monat</a>
{% else %}
<a href="{% url 'schedule:monthschedule' year|add:'-1' 12 %}" class="btn-info btn active">Im vergangenen Monat</a>
{% endifnotequal %}
{% ifnotequal month 12 %}
<a href="{% url 'schedule:monthschedule' year month|add:'1' %}" class="btn-info btn active">Nächsten Monat</a>
{% else %}
<a href="{% url 'schedule:monthschedule' year|add:'1' 1 %}" class="btn-info btn active">Nächsten Monat</a>
{% endifnotequal %}
<a href="{% url 'schedule:schedulecreate' year month %}" class="btn-info btn active">Schicht erstellen</a>
</ul>
<p>
<a href="{% url 'schedule:monthschedule' year month %}" button type="button" class="btn btn-outline-dark">alles</a>
{% for shisetsu_all in shisetsu_all_object %}
<a href="{% url 'schedule:monthschedulefilter' year month shisetsu_all.pk %}" button type="button" class="btn btn-outline-dark" span style="background-color:{{ shisetsu_all.color }}">{{ shisetsu_all.name }}</span></a>
{% endfor %}
</p>
{{ kikan }}
{% for shift in shift_object %}
{% if shift.name != "Geschlossen" and shift.name != "Ja" %}
{{ shift.name }} : {{ shift.start_time | date:"G"}}～{{ shift.end_time | date:"G"}}
{% endif %}
{% endfor %}
{% endblock header %}
{% block content %}
<table class="table">
<thead>
<tr> <!--Datum-->
<th class ="fixed00" rowspan="2"></th>
{% for item in calender_object %}
<th class ="fixed01">{{ item.date | date:"d" }}</th>
{% endfor %}
<tr> <!--Tag-->
{% for item in youbi_object %}
<th class ="fixed02">{{ item }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for profile in profile_list %}
{% for staff in user_list %}
{% if profile.user_id == staff.id %}
<tr align="center">
<th class ="fixed03" >{{ staff.last_name }}{{ staff.first_name }}</th> <!--staff_ID-Element, das in js verwendet wird-->
{% for item in object_list %}
{% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--Wenn der Benutzername der gleiche ist-->
<td class="meisai">
{% if item.shift_name_1 != None %}
{% if item.shift_name_1|stringformat:"s" == "Ja" or item.shift_name_1|stringformat:"s" == "Geschlossen" %}
{{ item.shift_name_1 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_1|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_1 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if item.shift_name_2 != None %}
{% if item.shift_name_2|stringformat:"s" == "Ja" or item.shift_name_2|stringformat:"s" == "Geschlossen" %}
{{ item.shift_name_2 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_2|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_2 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if item.shift_name_3 != None %}
{% if item.shift_name_3|stringformat:"s" == "Ja" or item.shift_name_3|stringformat:"s" == "Geschlossen" %}
{{ item.shift_name_3 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_3|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_3 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if item.shift_name_4 != None %}
{% if item.shift_name_4|stringformat:"s" == "Ja" or item.shift_name_4|stringformat:"s" == "Geschlossen" %}
{{ item.shift_name_4 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_4|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_4 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</td>
<tr align="center">
{% for month in month_total %}
{% if month.user == staff.id %}<!--Wenn der Benutzername der gleiche ist-->
<td class="fixed04"><b>{{ month.month_total_worktime }}</b></td>
{% endif %}
{% endfor %}
{% for item in object_list %}
{% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--Wenn der Benutzername der gleiche ist-->
<td class="meisai" id="s{{ staff.id }}d{{ item.date }}">
<a href="{% url 'schedule:update' item.pk %}">{{ item.day_total_worktime }} </a>
</td>
{% endif %}
{% endfor %}
</tr>
{% endif %}
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
{% endblock content %}
schedule/month.css
.table {
/*Beim vertikalen Scrollen behoben*/
position: -webkit-sticky;
position: sticky;
/*Brechen Sie die Linie nicht, damit sich die Höhe nicht ändert*/
white-space: nowrap;
border-collapse: collapse;
}
.fixed00{
position: sticky;
white-space: nowrap;
top: 0px;
left: 0px;
width:300px;
height:100px;
z-index: 1;
color: #fff;
padding: 8px 15px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.fixed01{
position: sticky;
top: 0;
color: #fff;
padding: 8px 15px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.fixed02{
position: sticky;
top: 36px;
color: #fff;
padding: 8px 15px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.fixed03 {
/*Beim horizontalen Scrollen behoben*/
text-align: center;
width: 200px;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
top: 0;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
background:-moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.9)));
padding: 8px 15px;
font-weight: bold;
border-left: 1px solid#258;
border-top:none;
border-bottom: 1px solid #a8b7c5;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px -3px 5px 1px #eee inset;
}
.fixed04 {
/*Beim horizontalen Scrollen behoben*/
text-align: center;
width: 200px;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
position: sticky;
top: 0;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
background:-moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.9)));
padding: 8px 15px;
font-weight: bold;
border-left: 1px solid #258;
border-top:none;
border-bottom: 1px solid#258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px -3px 5px 1px #eee inset;
}
.meisai{
border-left: 1px solid #258;
border-top:none;
border-bottom: 1px solid#258;
line-height: 120%;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px -3px 5px 1px #eee inset;
}
Ich werde es implementieren, nachdem ich den Meinungen der Benutzer zugehört habe, ob die Feiertage angezeigt werden sollen.
Irgendwie habe ich das Gefühl, dass der gesamte Zeitplan und die Tabelle für jede Einrichtung zu einer zusammengefasst werden können, aber ich denke darüber nach, fortzufahren, ohne zu genau darüber nachzudenken.
Zunächst denke ich, dass es viele Dinge gibt, an die man sich erinnern kann, wenn man sie abschließt (lacht) Die Realität ist, dass es Benutzern egal ist, ob der Code auf der Rückseite sauber ist.
Trotzdem ist die Programmierung interessant! Es gibt viele Male, in denen es nicht gut läuft, aber ich werde mein Bestes geben, wenn es zweckmäßig ist, dies zu verwenden (⌒∇⌒)
Recommended Posts