如何在Django中使用bootstrap Modal对表数据进行删除确认？

Question

我有一个表格来显示我的应用程序中的操作列表。我可以删除该表中的任何操作。因此，我在每一行中添加了一个删除按钮。此删除按钮将触发“删除确认”引导模式。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col" class="th-lg">Name</th>
    </tr>
  </thead>
  {% for action in actions_list %}
  <tbody>
    <tr class="test">
      <th scope="row" class="align-middle">{{ forloop.counter }}</th>
      <td class="align-middle">
        {{action.action_name}}
      </td>
      <td class="align-middle">
        {{action.id}}
      </td>
      <td>
        <div class="row justify-content-end">
          <button
            id="edit"
            type="button"
            class="btn btn-sm btn-dark col col-lg-2"
            style="color: rgb(255,0,0,0)"
          >
            <i class="lni-pencil"></i>
          </button>
          <button
            id="trash"
            type="button"
            class="btn btn-sm btn-dark col col-lg-2"
            style="color: rgb(255,0,0,0)"
            data-toggle="modal"
            data-target="#modalConfirmDelete"
          >
            <i class="lni-trash"></i>
          </button>
        </div>
      </td>
    </tr>
  </tbody>
  {% endfor %}
</table>

以下是“删除确认”引导模式的代码。它将有“是”和“否”按钮。如果我单击“是”，则该特定操作 ID 将被传递到 URL，并且该特定操作 ID 将被删除。

{% block modalcontent %}

<!--Modal: modalConfirmDelete-->
<div
  class="modal fade"
  id="modalConfirmDelete"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">Are you sure?</p>
      </div>

      <!--Body-->
      <div class="modal-body">
        <i class="fas fa-times fa-4x animated rotateIn"></i>
      </div>

      <!--Footer-->
      <div class="modal-footer flex-center">
        <form action="{% url 'delete_action' aid=action.id %}">
          {% csrf_token %}
          <button class="btn  btn-outline-danger">Yes</button>
        </form>

        <a
          type="button"
          class="btn  btn-danger waves-effect"
          data-dismiss="modal"
          >No</a
        >
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
{% endblock %}

在上面的代码中，我使用表单标签进行删除操作，然后该操作 ID URL 将触发。

以下是删除操作的 URL，

re_path(r'^delete_action/(?P<aid>\d+)/',
            views.delete_action, name='delete_action')

我面临的问题：我需要模式中的 action.id 值，但我没有得到！

请帮我解决这个问题。提前致谢 ：）

Answer 1

如果你们中有人遇到这种情况，我有一个快速解决方案。

主要思想是使用 Javascript 更改表单的操作 URL

views.py

class DeleteAddressView(DeleteView):
    success_url = reverse_lazy("home")

我将尝试在这里提供最低限度的解决方案：

my link in the list for delete item will be:

<a
  href="{% url 'item-delete' item.id %}"
  class="dropdown-item text-danger"
  data-toggle="modal"
  data-target="#delete-item-modal"
  id="delete-item"
>
  Remove
</a>

modal that popup will be:

<div class="modal fade" id="delete-item-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>Are you sure, You want to remove this item?</p>
            </div>
            <div class="justify-content-between mb-2 mr-2 text-right">
                <form method="post"
                      id="item-delete-form"
                >
                    <button type="button" class="btn btn-secondary mr-1" data-dismiss="modal">Cancel</button>
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" id="confirm-delete-item-button">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

现在我们必须使用项目的 href 值更改表单操作 URL

<script>
    $(document).on('click', '#delete-item', () => {
        document.getElementById("item-delete-form").action = document.querySelector('#delete-item').href
    });
</script>

我知道这对于您的问题来说为时已晚，但对其他人可能有帮助。这是从列表中删除项目而不将页面重定向到确认页面的最简单方法。

注意：前端框架引导程序用于显示模式，因此在继续此解决方案之前，您必须检查引导程序是否正常工作。