올바른 방법으로 자바 스크립트를 사용하여 장고 formset에 동적 양식을 추가하십시오.

Question

html 템플릿 출력의 성가신 복사본없이 템플릿의 장고 formset에 동적 양식을 추가하는 방법은 무엇입니까?

나는 결과 형태가 불명확 한 formset을 가지고 있으며, 버튼을 눌러 템플릿에 직접 몇 가지 양식을 추가해야합니다.

Answer 1

이 자체 응답은 Nick Lang의 this post을 기반으로합니다. 그러나이 방법을 단순화 할 것이므로 더 이상 전체 양식 html을 복사/붙여 넣기 할 필요가 없습니다.

우리는이 같은 관점에서 만든 인라인의 formset 있습니다

items_formset = inlineformset_factory(Parent, Item, form=ItemForm, extra=1) 
item_forms = items_formset() 

다음으로, 우리는, 우리가 해당 formset 인스턴스의 empty_form 속성을 사용하여 수행 할 수 밖으로의 formset 양식에 대한 템플릿을 생성 할 필요가있는 폼의 모든 "ID"번호가 예를 들어, __prefix__ 문자열로 대체하는 HTML 양식 서식 파일이 생성

<!-- 
{{ item_forms.empty_form }} 

{# <!-- or for crispy forms --> {% crispy item_forms.empty_form item_forms.form.helper %} #} 
--> 

그래서 먼저 우리는 ID로이 __prefix__를 교체하고이 템플릿을 사용하여 양식을 추가해야합니다.

<form action="" method="post"> 
{% csrf_token %} 
{{ item_forms.management_form }} 
<div id="items-form-container"> 
    {% for item_form in item_forms %} 
     <div id="item-{{ forloop.counter0 }}"> 
      {{ item_form.id }} 
      {{ item_form.as_p }} 
      {# <!-- or for crispy forms --> {% crispy item_form %} #} 
     </div> 
    {% endfor %} 
</div> 
<a href="#" id="add-item-button" class="btn btn-info add-item">Add Item</a> 
</form> 

마지막으로 우리는 몇 가지를 추가해야합니다

<script type="text/html" id="item-template"> 
<div id="item-__prefix__"> 
    {{ item_forms.empty_form }} 
    <!-- crispy: {% crispy item_forms.empty_form item_forms.form.helper %} --> 
</div> 
</script> 

그런 다음 우리는 양식의 주요 부분을 표시해야합니다
여기 우리가 새로운 요소를 만드는 데 사용할 수있는 양식 서식 파일의 코드이며, 다음 formset 양식을 추가하는 JS (jquery, 1.9.1 및 2.1.0 테스트). 그것은이 경우에는 필요로하지 않는 것 때문에 우리가 underscore.js를 사용하지 않습니다 참고 : 그냥 전부 그)

<script> 
$(document).ready(function() { 
    $('.add-item').click(function(ev) { 
     ev.preventDefault(); 
     var count = $('#items-form-container').children().length; 
     var tmplMarkup = $('#item-template').html(); 
     var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count); 
     $('div#items-form-container').append(compiledTmpl); 

     // update form count 
     $('#id_item_items-TOTAL_FORMS').attr('value', count+1); 

     // some animate to scroll to view our new form 
     $('html, body').animate({ 
       scrollTop: $("#add-item-button").position().top-200 
      }, 800); 
    }); 
}); 
</script> 

다음 "ID"번호로 __prefix__을 대체 할 str.replace, 단지 버튼, 새로운 "항목 추가"를 클릭 formset 항목이 나타납니다.

이 샘플을 app_name/model_name으로 바꾸십시오.