Python 如何在Django中使用引导模式对表数据进行删除确认？

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

<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>

#
名称
{%用于操作中的操作\u列表%}
{{forloop.counter}}
{{action.action_name}
{{action.id}
{%endfor%}

下面是“删除确认”引导模式的代码。它将有“是”和“否”按钮。 如果我单击“是”，则该特定操作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 %}

{%block modalcontent%}
你确定吗
{%csrf_令牌%}
对
不
{%endblock%}

在上面的代码中，我为删除操作使用了一个表单标记，然后将触发该操作id URL

下面是删除操作的URL

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

re_路径（r'^delete_action/（？P\d+）/”，
views.delete_action，name='delete_action'）

我面临的问题： 我需要模态中的action.id值，但我得不到

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

试试这个

 In your delete link

    <a href="{% url 'your-delete-url' pk=your.id %}" class="confirm-delete" title="Delete" data-toggle="modal" data-target="#confirmDeleteModal" id="deleteButton{{your.id}}">

在您的删除链接中

你的情态

<div class="modal fade" id="confirmDeleteModal" tabindex="-1" caller-id="" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body confirm-delete">
        This action is permanent!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="confirmDeleteButtonModal">Delete</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).on('click', '.confirm-delete', function () {
        $("#confirmDeleteModal").attr("caller-id", $(this).attr("id"));
      });

    $(document).on('click', '#confirmDeleteButtonModal', function () {
      var caller = $("#confirmDeleteButtonModal").closest(".modal").attr("caller-id");
      window.location = $("#".concat(caller)).attr("href");
    });
</script>

这个动作是永久的！
取消
删除
$（文档）。在（'单击'，'上。确认删除'，函数（）{
$（“#confirmDeleteModal”）.attr（“呼叫者id”），$（this.attr（“id”）；
});
$（文档）.on（'click'，'confirmDeleteButtonModel'，函数（）{
var caller=$（“#confirmDeleteButtonModel”）.closest（“.modal”）.attr（“呼叫者id”）；
window.location=$（“#”。.concat（调用者））.attr（“href”）；
});

试试这个

 In your delete link

    <a href="{% url 'your-delete-url' pk=your.id %}" class="confirm-delete" title="Delete" data-toggle="modal" data-target="#confirmDeleteModal" id="deleteButton{{your.id}}">

在您的删除链接中

你的情态

<div class="modal fade" id="confirmDeleteModal" tabindex="-1" caller-id="" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body confirm-delete">
        This action is permanent!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="confirmDeleteButtonModal">Delete</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).on('click', '.confirm-delete', function () {
        $("#confirmDeleteModal").attr("caller-id", $(this).attr("id"));
      });

    $(document).on('click', '#confirmDeleteButtonModal', function () {
      var caller = $("#confirmDeleteButtonModal").closest(".modal").attr("caller-id");
      window.location = $("#".concat(caller)).attr("href");
    });
</script>

这个动作是永久的！
取消
删除
$（文档）。在（'单击'，'上。确认删除'，函数（）{
$（“#confirmDeleteModal”）.attr（“呼叫者id”），$（this.attr（“id”）；
});
$（文档）.on（'click'，'confirmDeleteButtonModel'，函数（）{
var caller=$（“#confirmDeleteButtonModel”）.closest（“.modal”）.attr（“呼叫者id”）；
window.location=$（“#”。.concat（调用者））.attr（“href”）；
});

有关Gorkali答案的更多解释，请点击此处：

我就是这样解决的，基于上述答案，使用纯JavaScript，并添加了更多功能：

在

my_template.html

中：

<a href="{% url 'report_generate' %}" 
        class="btn btn-primary" id="generate_{{report.id}}"
        data-toggle="modal" data-target="#confirmModal" 
        data-message="If you proceed, the existing report will be overwritten."
        data-buttontext="Proceed">
    Regenerate
</a>
<a href="{% url 'report_generate'" 
        class="btn btn-primary" id="finalize_{{report.id}}"
        data-toggle="modal" data-target="#confirmModal" 
        data-message="If you proceed, the existing report will be finalized. After that, it can no longer be edited."
        data-buttontext="Finalize Report">
    Finalize
</a>

{% include "includes/confirm_modal.html" %}

<div class="modal fade" id="confirmModal" tabindex="-1" caller-id="" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body" id="modal-message">
                Do you wish to proceed?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmButtonModal">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        var buttons = document.querySelectorAll("[data-target='#confirmModal']");
        for (const button of buttons) {
            button.addEventListener("click", function(event) {
                // find the modal and add the caller-id as an attribute
                var modal = document.getElementById("confirmModal");
                modal.setAttribute("caller-id", this.getAttribute("id"));

                // extract texts from calling element and replace the modals texts with it
                if ("message" in this.dataset) {
                    document.getElementById("modal-message").innerHTML = this.dataset.message;
                };
                if ("buttontext" in this.dataset) {
                    document.getElementById("confirmButtonModal").innerHTML = this.dataset.buttontext;
                };
            })
        }

        document.getElementById("confirmButtonModal").onclick = () => {
            // when the Confirm Button in the modal is clicked
            var button_clicked = event.target
            var caller_id = button_clicked.closest("#confirmModal").getAttribute("caller-id");
            var caller = document.getElementById(caller_id);
            // open the url that was specified for the caller
            window.location = caller.getAttribute("href");
        };
    });
</script>

---

有关Gorkali答案的更多解释，请点击此处：

我就是这样解决的，基于上述答案，使用纯JavaScript，并添加了更多功能：

在

my_template.html

中：

<a href="{% url 'report_generate' %}" 
        class="btn btn-primary" id="generate_{{report.id}}"
        data-toggle="modal" data-target="#confirmModal" 
        data-message="If you proceed, the existing report will be overwritten."
        data-buttontext="Proceed">
    Regenerate
</a>
<a href="{% url 'report_generate'" 
        class="btn btn-primary" id="finalize_{{report.id}}"
        data-toggle="modal" data-target="#confirmModal" 
        data-message="If you proceed, the existing report will be finalized. After that, it can no longer be edited."
        data-buttontext="Finalize Report">
    Finalize
</a>

{% include "includes/confirm_modal.html" %}

<div class="modal fade" id="confirmModal" tabindex="-1" caller-id="" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body" id="modal-message">
                Do you wish to proceed?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmButtonModal">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        var buttons = document.querySelectorAll("[data-target='#confirmModal']");
        for (const button of buttons) {
            button.addEventListener("click", function(event) {
                // find the modal and add the caller-id as an attribute
                var modal = document.getElementById("confirmModal");
                modal.setAttribute("caller-id", this.getAttribute("id"));

                // extract texts from calling element and replace the modals texts with it
                if ("message" in this.dataset) {
                    document.getElementById("modal-message").innerHTML = this.dataset.message;
                };
                if ("buttontext" in this.dataset) {
                    document.getElementById("confirmButtonModal").innerHTML = this.dataset.buttontext;
                };
            })
        }

        document.getElementById("confirmButtonModal").onclick = () => {
            // when the Confirm Button in the modal is clicked
            var button_clicked = event.target
            var caller_id = button_clicked.closest("#confirmModal").getAttribute("caller-id");
            var caller = document.getElementById(caller_id);
            // open the url that was specified for the caller
            window.location = caller.getAttribute("href");
        };
    });
</script>

删除链接：

<a href="javascript:void(0)" data-toggle="modal"
                               class="confirm-delete"
                               data-url="{% url 'account:delete_address' pk=address.id %}"
                               data-target="#deleteItemModal"
                               data-message="Êtes-vous sûr de supprimer l'article ?"
                               >
                                <i class="far fa-trash-alt"></i>
                                <span>Supprimer</span>
                            </a>

删除链接：

<a href="javascript:void(0)" data-toggle="modal"
                               class="confirm-delete"
                               data-url="{% url 'account:delete_address' pk=address.id %}"
                               data-target="#deleteItemModal"
                               data-message="Êtes-vous sûr de supprimer l'article ?"
                               >
                                <i class="far fa-trash-alt"></i>
                                <span>Supprimer</span>
                            </a>

---

如果你们中有人经历过这种情况，我有一个快速解决方案

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

views.py

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

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

删除项目列表中的我的链接将是：

<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>

<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>

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

$（文档）。在（'单击'，'删除项目'，（）=>{
document.getElementById（“项目删除表单”）.action=document.querySelector（“#删除项目”）.href
});

我知道这对你的问题来说已经太晚了，但对其他人来说可能会有所帮助。这是从列表中删除项目而无需将页面重定向到确认页面的最简单方法

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

---

如果你们中有人经历过这种情况，我有一个快速解决方案

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

views.py

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

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

删除项目列表中的我的链接将是：

<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>

<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>

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

$（文档）。在（'单击'，'删除项目'，（）=>{
document.getElementById（“项目删除表单”）.action=document.querySelector（“#删除项目”）.href
});

我知道这对你的问题来说已经太晚了，但对其他人来说可能会有所帮助。这是从列表中删除项目而无需将页面重定向到确认页面的最简单方法

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