如何在django表单中实现加法器输入？

Question

我花了几个小时试图找出，如何在django中实现Adder输入。

我的问题出在我的模板中，我实现了一个javascript脚本，可以在表单中添加其他字段。

这些字段是键/值字段，在我的模型中我创建了一个JSONField。 我想从动态字段中获取数据并将其作为键值存储在我的JSONField

中

forms.py

class MyForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
    form_fields = kwargs.pop("fields", {})
    super(CrontabForm, self).__init__(*args, **kwargs)
    for field in form_fields:
        field_name = field['name']
        field_label = field['label']
        field_type = field['type']
        self.fields[field_name] = forms.CharField(label=field_label)
        print fields.name

class Meta:
    model = MyModel

models.py

class MyModel(models.Model):
user = models.ForeignKey(getattr(settings, 'AUTH_USER_MODEL'), verbose_name=_('User'))
params = JSONField(_('Url params'))

views.py

class MyView(LoginRequiredMixin, SuccessMessageMixin, CreateView):

model = MyModel
form_class = MyForm
template_name = '/index.html'
success_url = '/success/'
success_message = "The instance was created successfully"

def form_valid(self, form):
    form.instance.user = self.request.user
    return super(MyView, self).form_valid(form)

我的jquery.js：

{% block custom_js %}
{{ block.super }}
<script>

    console.log('tesss');
    $(document).ready(function () {
        // Number of params


        var index = 0;

        function addParams() {
            var tmp_template = $('template').clone();
            var paramsDiv = $('#params');
            paramsDiv.append(tmp_template.html());
            $($('[class$="param-x"]')[index]).attr('name', 'param' + (index + 1));
            $($('[class$="value-x"]')[index]).attr('name', 'value' + (index + 1));
            index = index + 1;
        }

        addParams();

        $('#addParam').on('click', function(){
           addParams();
        });

    });
</script>
{% endblock %}

的index.html：

        <div class="col-md-12">

        <form action="." method="post">
            <div class="col-md-6">
                {% csrf_token %}
                {% for field in form %}
                    <div class="form-group">
                        <div class="row">
                            {{ field.errors }}
                            <label class="col-md-2 control-label">{{ field.label_tag }}</label>

                            <div class="col-md-6">
                                {{ field }}
                            </div>
                            {% if field.help_text %}
                                <p class="help">{{ field.help_text|safe }}</p>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}


                <div class="text-center">
                    <div class="pagination">

                        <i class="btn btn-success waves-input-wrapper waves-effect"
                           style="color:#fff ;background:#5cb85c">
                            <input class="waves-button-input" type="submit" value="Add"
                                   style="background-color:rgba(0,0,0,0);"></i>

                        {% url 'cron:crontab-list'  as cronslist %}
                        {#            <div class="col-sm-offset-5 col-sm-2 text-center">#}
                        <a href="{{ cronslist }}"><i class="btn btn-primary waves-input-wrapper waves-effect"
                                                     style="color:#fff;background:#286090">
                            <input class="waves-button-input has-value" type="button" value="Cancel"
                                   style="background-color:rgba(0,0,0,0);">
                        </i></a>
                    </div>
                </div>
            </div>

            <div class="col-md-6">

                <div class="row">
                    <div class="col-md-10">
                        <div style="text-align:center">
                            <label class="col-md-4">Param</label>
                            <label class="col-md-6">Value</label>

                        </div>
                    <div id="params"></div>

                    <!-- The template for adding new field -->

                    <template>
                        <div class="form-group">

                            <div class="col-md-4">
                                <input type="text" class="form-control param-x"  placeholder="Task"/>
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control value-x" placeholder="Task"/>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <hr>
                        </div>
                    </template>
                </div>
                <div class="col-md-2">
                    <label class="col-md-2">Add</label>
                    <button id="addParam" type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>


                    </div>
                </div>
                </div>


            </div>