我有一个表格来显示我的应用中的操作列表。我可以删除该表中的任何操作。因此，我在每一行中都添加了一个删除按钮。此删除按钮将触发“删除确认”引导程序模式。
<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 %}
在上面的代码中，我对删除操作使用form标记，然后该操作ID URL将触发。
下面是删除操作的URL，
re_path(r'^delete_action/(?P<aid>\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>
有关Gorkali答案的更多解释，您可以在这里查看：https://elennion.wordpress.com/2018/10/08/bootstrap-4-delete-confirmation-modal-for-list-of-items/
根据上面的答案，使用普通的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" %}
包含文件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>