时间戳

首页 > 解决方案 > 如何从数据库中获取数据并分别在 django 的引导模式框（弹出）中显示？

python-3.x - 如何从数据库中获取数据并分别在 django 的引导模式框（弹出）中显示？

问题描述

我正在使用的技术 --> 后端--> Python、 Web 框架--> Django、前端--> HTML5、CSS3、Bootstrap 4、数据库--> SQLite3。

我想要什么->在每个引导程序的模态框（弹出）中显示每个对象的数据。

问题->第一个对象的数据仅显示在所有模式框（弹出窗口）中。

文件如下：

HTML 模板-->manage_requisition.html 

{% extends 'hod_template/base_template.html' %}
{% block page_title %}
Manage Requisitions
{% endblock page_title %}
{% block main_content %}
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
          <div class="row">
              <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Manage Requisitions</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
                <div class="table">
                    <table class="table">
                        <tr>
                            <th style="text-align: center;">Action</th>
                            <th>View Requisition</th>
                        </tr>
                        {% for requisition in requisitions %}
                        <tr>
                            <td style="text-align: center; vertical-align: middle;">
                                {% if requisition.requisition_status == 0 %}
                                <a style="width: 85px;" href="{% url 'supervisor_approve_requisition' requisition_id=requisition.id %}" class="btn btn-success inline" >Approve</a>
                                <a style="width: 85px;" class="btn btn-danger inline" href="{% url 'supervisor_rejected_requisition' requisition_id=requisition.id %}" >Reject</a>
                                {% elif requisition.requisition_status == 1  %}
                                 <button class="btn btn-warning" disabled="disabled" data-toggle="modal" data-target="#reply_modal">Approved</button>
                                {% else %}
                                <button class="btn btn-danger" disabled="disabled" data-toggle="modal" data-target="#reply_modal">Rejected</button>
                                {% endif %}
                            </td>
                            <td>
                                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#reqModal">
                                    View Requisition
                                </button>
                                <div class="modal" id="reqModal" tabindex="-1" aria-labelledby="reqModal" aria-hidden="true">
                                  <div class="modal-dialog modal-dialog-scrollable">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <h5 class="modal-title" id="reqModalTitle">Requisition Details</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                        </button>
                                      </div>
                                      <div class="modal-body">
                                        <p><strong>Position Required :</strong> {{ requisition.position_required }}</p>
                                        <p><strong>Requirement :</strong> {{ requisition.requirement }}</p>
                                        <p><strong>Candidate Name :</strong> {{ requisition.candidate_name }}</p>
                                        <p><strong>Department :</strong> {{ requisition.department }}</p>
                                        <p><strong>Post :</strong> {{ requisition.post }}</p>
                                        <p><strong>Requirement Time Period :</strong> {{ requisition.requirement_time_period }}</p>
                                        <p><strong>Work Type :</strong> {{ requisition.work_type }}</p>
                                        <p><strong>Duration Start Date :</strong> {{ requisition.duration_start_date }}</p>
                                        <p><strong>Duration End Date :</strong> {{ requisition.duration_end_date }}</p>
                                        <p><strong>Requisition Reason :</strong> {{ requisition.requisition_reason }}</p>
                                        <p><strong>Minimum Qualification :</strong> {{ requisition.min_qualification }}</p>
                                        <p><strong>Maximum Qualification :</strong> {{ requisition.max_qualification }}</p>
                                        <p><strong>Minimum Experience :</strong> {{ requisition.min_experience }}</p>
                                        <p><strong>Maximum Experience :</strong> {{ requisition.max_experience }}</p>
                                      </div>
                                       <div class="modal-footer">
                                      </div>
                                    </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>

            </div>
            <!-- /.card -->



          </div>
          </div>
      </div>
    </section>
<!-- Modal -->
    <!-- /.content -->
{% endblock main_content %}

查看文件 --> HODviews.py 

def Manage_Requisitions(request):
    requisitions = Requisition.objects.all()
    context = {"requisitions":requisitions}
    return render(request, "hod_template/manage_requisition.html", context)

urls.py 文件 --> urls.py

path("manage_requisition/", HODviews.Manage_Requisitions, name="manage_requisition")

模型.py 文件 --> models.py 

class Requisition(models.Model):
id = models.AutoField(primary_key=True)
position_required = models.CharField(max_length=2000, default="")
requirement_choices = (
    ("New", "New"),
    ("BackFill", "BackFill")
)
requirement = models.CharField(max_length=100, choices=requirement_choices, default="")
candidate_name = models.CharField(max_length=2000, default="")
department = models.CharField(max_length=2000, default="")
post = models.CharField(max_length=2000, default="")
requirement_type = (
    ("Permanent", "Permanent"),
    ("Temporary", "Temporary"),
    ("Fixed Contract", "Fixed Contract")
)
requirement_time_period = models.CharField(max_length=500, choices=requirement_type, default="")
work_type = (
    ("Full-Time", "Full-Time"),
    ("Part-Time", "Part-Time")
)
work_type = models.CharField(max_length=500, choices=work_type, default="")
duration_start_date = models.DateField(blank=True)
duration_end_date = models.DateField(blank=True)
requisition_reason = models.TextField()
min_qualification = models.CharField(max_length=1000 ,default="")
max_qualification = models.CharField(max_length=1000 ,default="")
min_experience= models.CharField(max_length=1000 ,default="")
max_experience= models.CharField(max_length=1000 ,default="")
requisition_status = models.IntegerField(default=0)
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now_add=True)
objects = models.Manager()

def __str__(self):
    return self.candidate_name

用户界面的图像

第一个弹出窗口的图像

第二个弹出窗口的图像 在此处输入图像描述

我在每个弹出窗口中获取第一个对象的数据。但我希望每个对象的数据都显示在每个弹出窗口中。

你可以在这里联系我 Linkedin --> https://www.linkedin.com/in/precioushuzaifa/

Instagram --> https://www.instagram.com/precious_huzaifa/

标签： python-3.xdjangodjango-modelsbootstrap-4

解决方案

问题是您所有的模态都具有相同的 id，因此您的按钮只会打开他们找到的第一个具有该 ID 的模态。您需要为每个模态添加某种 id。您可以使用{{ forloop.counter }}获取迭代编号并将其附加到 id。

<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#reqModal-{{ forloop.counter }}">
    View Requisition
</button>

<div class="modal" id="reqModal-{{ forloop.counter }}" tabindex="-1" aria-labelledby="reqModal" aria-hidden="true">

推荐阅读