Django модальное всплывающее окно по ссылке на список

Я хотел бы разработать всплывающее окно по ссылке списка (пожалуйста, смотрите скриншот) нажмите. всплывающее окно будет список также. На данный момент мой код выглядит следующим образом Класс модели:

class PSCInscpection(models.Model):
    vessel = models.ForeignKey(Vessel, on_delete=models.CASCADE, null=True)
    inspection_id = models.CharField(max_length=100, null=False, unique=True)
    followup_inspection = models.BooleanField(null=False, default=False)
    date = models.DateTimeField(null=True, blank=True)
    port = models.CharField(max_length=50, null=True, blank=True)
    country = models.CharField(max_length=50, null=True, blank=True)
    number_of_defects = models.PositiveIntegerField(null=True, blank=True)
    days_detained = models.PositiveIntegerField(null=True, blank=True)

class PSCInscpectionDefects(models.Model):
    pscinscpection = models.ForeignKey(PSCInscpection, on_delete=models.CASCADE, null=True)    
    inspection_id = models.CharField(max_length=100, null=False, blank=False)
    defect_code = models.CharField(max_length=50, null=True, blank=True)
    defect_text = models.CharField(max_length=255, null=True, blank=True)
    class_is_responsible = models.CharField(max_length=50, null=True, blank=True)
    defective_item_code = models.CharField(max_length=50, null=True, blank=True)

views.py

inspections = PSCInscpection.objects.filter(
        vessel_id=self.kwargs['pk']).order_by('-date')
    renderableInspections = []
    for _insp in inspections:            
        item = {
            "date": _insp.date.strftime("%Y-%m-%d"),
            "port": _insp.port,
            "country": _insp.country,
            "defects": _insp.number_of_defects,
            "detained": _insp.days_detained
        }
        renderableInspections.append(item)
    context['inspections'] = renderableInspections

Мой список связывается с этим объектом "PSCInscpection", а всплывающее окно связывается с объектом "PSCInscpectionDefects". Помогите, пожалуйста, разобраться с этим вопросом. Спасибо !

view.html:

{% for inspection in inspections %}
        <tr>
          <td>{{ inspection.date }}</td>
          <td>{{ inspection.country }}</td>
          <td>{{ inspection.port }}</td>
          <td>
            {% if inspection.defects %}
              <a href="#">{{ inspection.defects }}</a>
            {% else %}
            {{ 0 }}
            {% endif %}
          </td>
          <td>{{ inspection.detained|default:0 }} Days</td>
        </tr>
        {% endfor %}

enter image description here

Вы должны иметь возможность получить доступ к дефектам, связанным с каждой инспекцией, через обратное отношение внешнего ключа, но в настоящее время вы не можете этого сделать, потому что контекст, который вы отправляете в шаблон, не является самим набором объектов queryset. Вместо этого вы создали структуру данных вручную для обработки этого, что не является необходимым.

Вы должны отправить контекст в качестве вашего объекта queryset, чтобы вы могли получить доступ к вашему обратному отношению внешнего ключа непосредственно в шаблоне с помощью inspections.pscinscpectiondefects_set.all. Это очень многословно, поэтому я рекомендую установить атрибут related_name для поля pscinscpection в вашей модели PSCInscpectionDefects на defects или аналогичный, чтобы вы могли вместо этого получить доступ к нему с помощью inspections.defects.all.

Упростите ваше представление, чтобы вместо него возвращался отфильтрованный набор запросов.

# views.py

context['inspections'] = PSCInscpection.objects.filter(
        vessel_id=self.kwargs['pk']).order_by('-date')
return context

Я не буду приводить HTML/CSS/JS код для модала, потому что этот вопрос связан с Django. Но вы должны быть в состоянии запустить его, когда пользователь нажимает на ссылку на количество дефектов. Вот изменение шаблона, предполагающее, что задано related_name.

# view.html

{% for inspection in inspections %}
        <tr>
          <td>{{ inspection.date }}</td>
          <td>{{ inspection.country }}</td>
          <td>{{ inspection.port }}</td>
          <td>
      
      {% if inspection.defects %}
        <a href="#">{{ inspection.defects.count }}</a> <!-- link to modal here -->
        {% for defect in inspection.defects.all %}
          {{ defect }}
        {% endfor %}
      {% else %}
        {{ 0 }}
      {% endif %}
    </td>
    <td>{{ inspection.detained|default:0 }} Days</td>
  </tr>
{% endfor %}
Вернуться на верх