调用django DeleteView弹出的删除模式

Question

我使用django通用deleteview来删除我的对象，我想从对象列表中删除对象。有一个垃圾桶的图标，如果用户点击垃圾桶图标，就会弹出一个模式，确保用户是否要删除对象。如果用户点击垃圾桶图标，一个弹出的模式将出现，以确保用户是否要删除对象。该弹出窗口将有一个取消按钮和一个删除按钮。如果用户选择删除按钮，对象将被永远删除。但问题是列表视图在一个html中，而删除弹出式模态html在另一个html中。由于我使用django的通用类来处理ListView和DeleteView，我必须保持两个独立的html。

employe_list.html: 这个html显示了员工的列表视图。

{% extends "base.html" %}
{% block content %}
{% load static %}

<link rel="stylesheet" href="{% static 'employee/css/master.css' %}">

<div class="">
    <div class="table-wrapper">
      <div class="table-title">
        <div class="row">
          <div class="col-sm-6">
            <h2><b>Employees</b></h2>
          </div>
          <div class="col-sm-6">
            <a href="{% url 'employee:employee-add' %}" data-target="exampleModal" class="btn btn-success" data-toggle="modal">
                            <span ></span>
                            <i class="material-icons"></i>
                            <span data-feather="plus"></span>Add New Employee
                        </a>
            <!--<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons">&#xE15C;</i> <span>Delete</span></a>-->
          </div>
        </div>
      </div>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>
              <span class="custom-checkbox">
                                <input type="checkbox" id="selectAll">
                                <label for="selectAll"></label>
                        </span>
            </th>
                        <th>ID</th>
            <th>First Name</th>
                        <th>Last Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Phone</th>
                        <th>Department</th>
                        <th>Designation</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <!-- Loop for showing employee list in a table-->
          {% for employee in employees %}
          <tr>
            <td>
              <span class="custom-checkbox">
                  <input type="checkbox" id="checkbox1" name="options[]" value="1">
                  <label for="checkbox1"></label>
                </span>
            </td>
                        <td>{{employee.e_id}}</td>
            <td>{{employee.first_name}}</td>
                        <td>{{employee.last_name}}</td>
            <td>{{employee.email}}</td>
            <td>{{employee.address}}</td>
            <td>{{employee.phone_number}}</td>
                        <td>{{employee.department}}</td>
                        <td>{{employee.designation}}</td>

            <td>
              <a href="{% url 'employee:employee-update' employee.id %}" class="edit" data-toggle="modal">
                                <i class="material-icons" data-toggle="tooltip" title="Edit"></i>
                                <span data-feather="edit-2"></span>
                            </a>
              <a href="{% url 'employee:employee-delete' employee.id %}" date-target="#deleteEmployeeModal" class="delete" data-toggle="modal">
                                <i class="material-icons" data-toggle="tooltip" title="Delete"></i>
                                <span data-feather="trash"></span>
                            </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

            <div class="">
                {% if is_paginated %}
                <ul class="pagination">
                    {% if page_obj.has_previous %}
                        <li><a  href="?page={{ page_obj.previous_page_number }}"><span data-feather="chevron-left"></span></a></li>
                    {% else %}
                        <li class="disabled"><span data-feather="chevron-left"></span></li>
                    {% endif %}
                    {% for i in paginator.page_range %}
                        {% if page_obj.number == i %}
                            <li class="active"><span class="pagination-number pagination-current">{{ i }} <span class="sr-only">(current)</span></span></li>
                        {% else %}
                            <li><a class="pagination-number" href="?page={{ i }}">{{ i }}</a></li>
                        {% endif %}
                    {% endfor %}
                    {% if page_obj.has_next %}
                        <li><a href="?page={{ page_obj.next_page_number }}"><span data-feather="chevron-right"></span></a></li>
                    {% else %}
                        <li class="disabled"><span data-feather="chevron-right"></span></li>
                    {% endif %}
                </ul>
                {% endif %}
            </div>
    </div>

<div id="deleteEmployeeModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content"
        </div>
    </div>
</div>
{% endblock %}

employee_delete.html：该html显示了员工的列表视图。该html显示删除模式。

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'dashboard/css/master.css' %}">
  </head>
  <body>
  <h2>Employee delete </h2>

        <form method="post">
          {% csrf_token %}
          <div class="modal-header">
            <h4 class="modal-title">Delete Employee</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <p>Are you sure you want to delete these Records?</p>
            <p class="text-warning"><small>This action cannot be undone.</small></p>
          </div>
          <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
            <input type="submit" class="btn btn-danger" value="Delete">
          </div>
        </form>

</body>
</html>

views.py.I am using django generic deleteview for delete my object:

class EmployeeDeleteView(DeleteView):
    """
    Deletes a created employee
    """
    template_name = 'employee/employee_delete.html'
    queryset = Employee.objects.all()

    def get_success_url(self):
        return reverse('employee:employee-list')

    def get_object(self):
        id_ = self.kwargs.get("id")
        return get_object_or_404(Employee, id=id_)

    def delete_modal_view(request):
        return render(request, "employee_delete.html")

Answer 1

这个网址。{% url 'employee:employee-delete' employee.id %} 应该用GET请求渲染模态html。在模式中，如果用户点击删除，它应该做一个DELETE请求对该url ({% url 'employee:employee-delete' employee.id %}).

你也可以决定用一个单独的url来显示模式，并保留DeleteView来显示模式。{% url 'employee:employee-delete' employee.id %}

例如

modal.html

         <h2>Employee delete </h2>

         <form method="post" action="{% url 'employee:employee-delete' employee.id %}">
          {% csrf_token %}
          <div class="modal-header">
            <h4 class="modal-title">Delete Employee</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <p>Are you sure you want to delete these Records?</p>
            <p class="text-warning"><small>This action cannot be undone.</small></p>
          </div>
          <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
            <input type="submit" class="btn btn-danger" value="Delete">
          </div>
        </form>

视图.py

class EmployeeDeleteView(DeleteView):
    """
    Deletes a created employee
    """
    template_name = 'employee/employee_delete.html'
    model = Employee

    def get_object(self):
        id_ = self.kwargs.get("id")
        return get_object_or_404(Employee, id=id_)

    def get(self, request, *args, **kwargs):
        employee = self.get_object()
        return render(request, 'modal.html', {'employee': employee})

    def get_success_url(self):
        return reverse('employee:employee-list')