Table de décalage Django Python
J'ai étudié et mis en œuvre comment contrôler le défilement des tables avec Html et Css, mais certaines choses ne fonctionnent pas.
situation actuelle
Il n'y a pas de problème au moment de l'affichage initial, mais ...
Lorsque vous faites défiler
La partie titre en haut à gauche est devenue transparente et le nom a été visualisé. La date et le jour sont également transparents (rires) Sites référencés lors de la création de la table Source de référence: https://webliker.info/75964/ https://webliker.info/02035/ J'en ai vu beaucoup d'autres
Je fais des recherches depuis quelques heures sur ce problème, mais je n'ai pas compris, alors je vais laisser un instant (rires)
De plus, nous avons implémenté un affichage pour chaque installation. J'ai fait un calendrier pour afficher le tout, donc en ajoutant l'ID de l'installation à la fin de l'URL, J'ai fait une copie de Views et Html pour l'affichage pour chaque installation.
Cela a été fait immédiatement
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"))
#Obtenez le nombre de jours dans la plage de travail
enddate = datetime.date(year,month,20)
startdate = enddate + relativedelta(months=-1)
kaisu = enddate - startdate
kaisu = int(kaisu.days)
kikan = str(startdate) +"～"+ str(enddate)
#Faites une liste de dates et de jours
hiduke = str(startdate)
date_format = "%Y-%m-%d"
hiduke = dt.strptime(hiduke, date_format)
weekdays = ["Mois","Feu","eau","bois","Argent","sol","journée"]
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">le mois dernier</a>
{% else %}
<a href="{% url 'schedule:monthschedule' year|add:'-1' 12 %}" class="btn-info btn active">le mois dernier</a>
{% endifnotequal %}
{% ifnotequal month 12 %}
<a href="{% url 'schedule:monthschedule' year month|add:'1' %}" class="btn-info btn active">Le mois prochain</a>
{% else %}
<a href="{% url 'schedule:monthschedule' year|add:'1' 1 %}" class="btn-info btn active">Le mois prochain</a>
{% endifnotequal %}
<a href="{% url 'schedule:schedulecreate' year month %}" class="btn-info btn active">Créer un changement</a>
</ul>
<p>
<a href="{% url 'schedule:monthschedule' year month %}" button type="button" class="btn btn-outline-dark">tout</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 != "Fermé" and shift.name != "Oui" %}
{{ shift.name }} : {{ shift.start_time | date:"G"}}～{{ shift.end_time | date:"G"}}
{% endif %}
{% endfor %}
{% endblock header %}
{% block content %}
<table class="table">
<thead>
<tr> <!--Date-->
<th class ="fixed00" rowspan="2"></th>
{% for item in calender_object %}
<th class ="fixed01">{{ item.date | date:"d" }}</th>
{% endfor %}
<tr> <!--journée-->
{% 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_Élément id utilisé dans js-->
{% for item in object_list %}
{% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--Si le nom d'utilisateur est le même-->
<td class="meisai">
{% if item.shift_name_1 != None %}
{% if item.shift_name_1|stringformat:"s" == "Oui" or item.shift_name_1|stringformat:"s" == "Fermé" %}
{{ 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" == "Oui" or item.shift_name_2|stringformat:"s" == "Fermé" %}
{{ 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" == "Oui" or item.shift_name_3|stringformat:"s" == "Fermé" %}
{{ 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" == "Oui" or item.shift_name_4|stringformat:"s" == "Fermé" %}
{{ 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 %}<!--Si le nom d'utilisateur est le même-->
<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" %}<!--Si le nom d'utilisateur est le même-->
<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 {
/*Correction lors du défilement vertical*/
position: -webkit-sticky;
position: sticky;
/*Ne coupez pas la ligne pour que la hauteur ne change pas*/
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 {
/*Correction lors du défilement horizontal*/
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 {
/*Correction lors du défilement horizontal*/
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;
}
Je vais l'implémenter après avoir écouté les avis des utilisateurs sur l'opportunité d'afficher les vacances.
D'une manière ou d'une autre, j'ai le sentiment que tout le calendrier et le tableau de chaque établissement peuvent être combinés en un seul, mais je pense continuer sans être trop précis à ce sujet.
Tout d'abord, je pense qu'il y a beaucoup de choses dont on peut se souvenir en le complétant (rires) La réalité est que les utilisateurs ne se soucient pas de savoir si le code à l'arrière est propre.
Même ainsi, la programmation est intéressante! Il y a de nombreuses fois où cela ne va pas bien, mais je ferai de mon mieux si cela vous convient (⌒∇⌒)
Recommended Posts