时间戳

首页 > 解决方案 > django 创建具有多个输入字段的模板

python - django 创建具有多个输入字段的模板

问题描述

我正在尝试创建一个模板，该模板将采用项目、数量和单价等输入项目，并呈现包含总价的 pdf 报告。此外，我希望输入以表格形式，并通过单击 + 图标或其他内容动态添加行。

我的文件夹结构是： 

Project
|__ app
    |__ template
        |__ app.html

我正在从继承引导程序的 base.html 扩展 app.html。尝试了下面的代码，但无法弄清楚如何做到这一点。

     {% extends 'base.html' %}


            {% block head %}
            {% endblock %}


            {% block body %}


            <div class="panel panel-default">


              <div class="panel-body">

              <div id="all_fields">

                    </div>
                   <div class="col-sm-3 nopadding">
              <div class="form-group">
                <input type="text" class="form-control" id="Itemquantity" name="Itemquantity[]" value="" placeholder="Item Quantity">
              </div>
            </div>
            <div class="col-sm-3 nopadding">
              <div class="form-group">
                <input type="number" class="form-control" id="Quantity" name="Quantity[]" value="" placeholder="Quantity">
              </div>
            </div>
            <div class="col-sm-3 nopadding">
              <div class="form-group">
                <input type="number" class="form-control" id="Unitprice" name="Unitprice[]" value="" placeholder="Unit Price">
              </div>
            </div>

            <div class="col-sm-3 nopadding">
              <div class="form-group">
                <div class="input-group">

                  <div class="input-group-btn">
                    <button class="btn btn-success" type="button"  onclick="all_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="clear"></div>

              </div>
              <div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div>

            </div>
            {% endblock %}

标签： pythonhtmldjango

解决方案

如果你想要动态，你应该去 Javascript 而不是 Django，因为 Django 是服务器端，django 只会在新请求后处理你的数据......所以你可以从头开始设置一个 ajax 来连接到你的 django 而用户是与您的页面交互并基于来自服务器的某些内容创建此新输入...或者您的输入将仅在您的 HTML 中生成，并且只有在发送到您的后端后才会由 django 处理（您必须创建自己的逻辑）

可能有任何库已经为您做到了。

我确实建议将您的 javascript 设置为动态创建 ID 和新输入，在一个表单标签内设置所有内容，将此表单发送到您的后端，在您的发布请求中捕获它并处理如果...如果您收到 5 个输入，那么这意味着存在我 5 个新项目...

推荐阅读