Question

案例：

我的数据库中有一个表，其中每一行都包含一个type form的值，并在行的末尾有一个保存按钮。

现在我想做以下事情：

当我单击“保存”按钮时，必须打开一个模态弹出窗口，它应显示单击了保存按钮的行中存在的数据。

此外，模态将有两个按钮提交和取消。如果我点击模型上的保存按钮，数据必须在后端发送（我使用Django作为后端）。

我该怎么做？

任何帮助都将受到高度赞赏。

代码：

{% block content %}   

<table id ="devicetable" cellpadding="20%" style="width:100%">

    <thead>
        <tr>

            {% for column in columns %}

                <td>{{ column }}</td>

            {% endfor %}
          {% if type != "NReq" %}
            <td> Button </td>
          {% endif %}
        </tr>
    </thead>

{% for a in all %}

    <tr>
      <form action = {% url type %} method="POST">{% csrf_token %}

        {% for k in columns %}
              <td>{{ a|get_item:k }}<input type = "hidden" name = {{k}} value = "{{ a|get_item:k }}"></td>
        {% endfor %}
        {% if type != "NReq" %}
          <td> <button type="submit" class="btn btn-primary">{{type}}</button></td>
        {% endif %}

      </form>
      </tr>

{% endfor %}

</table>

{% endblock %}

Answer 1

单击保存按钮时，您可以处理表单的提交事件（请参阅onsubmit Event）。使用此事件可以调用（a）：

中的函数

打开模态
遍历表单内的<input>标记，并在模式
返回false以便不将此数据发送到服务器

现在，当模式打开时，处理按钮的事件并手动提升表单的提交事件。对于jQuery，这可能看起来像（b） - 未经测试：

$("#submit").on("click", function() { $("#formId").submit(); });
$("#cancel").on("click", function() { $("#modalId").close(); });

请注意：当你从模式（b）提交表单时，你应该插入一个全局变量，不要重复（a）的步骤。否则，表格将永远不会被提交。

将表单数据传递给bootstrap模式

1 个答案: