如何在Django中使用bootstrap模式对表数据进行删除确认?

2024-03-29 11:14:06 发布

您现在位置:Python中文网/ 问答频道 /正文

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

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

在上面的代码中,我为delete操作使用了一个表单标记,然后该操作id URL将被触发。你知道吗

下面是删除操作的URL

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

我面临的问题: 我需要操作id在模态中的值,我没有得到!你知道吗

请帮我解决这个问题。提前感谢:)


Tags: dividtablebuttonactioncoldelete按钮
1条回答
网友
1楼 · 发布于 2024-03-29 11:14:06

试试这个

 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>

相关问题 更多 >