Question

我正在尝试创建一个模板，该模板将接受输入的项目（例如项目，数量和单价），并以总价格呈现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 %}

Answer 1

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

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

我确实建议将您的JavaScript设置为动态创建ID和新输入，将所有表单都设置在一个表单标签中，将此表单发送到您的后端，在您的发帖请求中捕获它，如果...收到5个输入，则进行处理...这意味着我有5个新项目...

Django创建带有多个输入字段的模板

1 个答案: