Question

我正在尝试扩展代码段： https://djangosnippets.org/snippets/1389/ （效果很好）使用javascript

动态扩展formset

我想扩展这种模式，使我能够在页面上拥有多个表单集，并分别动态扩展每个表单集。

jquery动态表在页面上正好进行扩展和收缩，但是formset中的新表单总是来自formset1，即使formset2表单添加了＆＃39;使用按钮

html模板代码段（每个表单集的其中一个表，例如sourceformset）：

<div id="{{ sourceformset.prefix }}">
<table id="source_id_forms" border="1" cellpadding="0" cellspacing="5" class="recordtable">
  <tr>
    <td colspan="2">
    <!-- {{ sourceformset.as_p }} -->
    </td>
  </tr>
  {% for form in sourceformset.forms %}
  <tr id="{{ form.prefix }}-row" class="dynamic-form">
    <td></td>
    <td>{{ form.as_p }}
       <a id="remove-{{ form.prefix }}-row" href="javascript:void(0)" onclick="deleteForm(this, {{ sourceformset.prefix }})">delete property</a>
    </td>
  </tr>
  {% endfor %}
  <tr><td></td><td>
    <a href="javascript:void(0)" onclick="addForm(this, {{ sourceformset.prefix }})">add property</a>
    </td>
  </tr>
</td></tr>
</table>
</div>

javascript函数

function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
}

function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form:first',prefix).clone(true).get(0);
    $(row).removeAttr('id').insertAfter($('.dynamic-form:last',prefix)).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });
    $(row).find('.delete-row').click(function() {
        deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;
}

在我看来，addForm按钮无法区分两个django formset实例，只是默认为第一个

感谢所有帮助和建议

标记

如何将django表单参数从模板传递到javascript函数

0 个答案: