Django的 - 如何摺疊形式像Django管理

Question

我用django-form-utils產生類似於Django管理字段集BetterModelForm。通過使用BetterModelForm，可以將CSS與fieldset與'classes'選項相關聯。我想知道我怎麼可能崩潰我的表單的字段集就像我們可以在Django的管理做到這一點。

forms.py：

class ezAppOptionFormSet(BetterModelForm): 


    class Meta: 
     model = EzApp 
     fieldsets = [('App options:', {'fields': ['level', 'center_1', 'center_2', 'width', 'height'], 'classes': ['collapse']}), 
       ('Colors:', {'fields': ['color'], 'classes': ['collapse']}) 
       ] 

template.html：

<form method="post" action="." encrypt="multipart/form-data">{% csrf_token %} 
     <b>App name: {{ App_title }}</b> 
     {% if formset.non_field_errors %}{{ formset.non_field_errors }}{% endif %} 
     {% for fieldset in formset.fieldsets %} 
      <fieldset class="{{ fieldset.classes }}"> 
      {% if fieldset.legend %} 
       <legend>{{ fieldset.legend }}</legend> 
      {% endif %} 
      {% if fieldset.description %} 
      <p class="description">{{ fieldset.description }}</p> 
      {% endif %} 
      <ul> 
      {% for field in fieldset %} 
       {% if field.is_hidden %} 
        {{ field }} 
       {% else %} 
        <li{{ field.row_attrs }}> 
        {{ field.errors }} 
        {{ field.label_tag }}<br> 
        {{ field }} 
        </li> 
       {% endif %} 
      {% endfor %} 
      </ul> 
      </fieldset> 
     {% endfor %} 

Answer 1

我做到了，僅僅是使用Django管理的collapse.js腳本的方式。

在模板中，導入腳本：

<script type="text/javascript" src="/admin/jsi18n/"></script> 
<script type="text/javascript" src="/static/admin/js/core.js"></script> 
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script> 
<script type="text/javascript" src="/static/admin/js/jquery.js"></script> 
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script> 
<script type="text/javascript" src="/static/admin/js/actions.js"></script> 
<script type="text/javascript" src="/static/js/collapse.js"></script> 

然後更改標記爲<legend>和<h2>賓果，你有同樣的崩潰。

<form method="post" action="." encrypt="multipart/form-data">{% csrf_token %} 
    <b>App name: {{ App_title }}</b> 
    {% if formset.non_field_errors %}{{ formset.non_field_errors }}{% endif %} 
    {% for fieldset in formset.fieldsets %} 
     <fieldset class="{{ fieldset.classes }}"> 
     {% if fieldset.legend %} 
      <h2>{{ fieldset.legend }}</h2> 
     {% endif %} 
     {% if fieldset.description %} 
     <p class="description">{{ fieldset.description }}</p> 
     {% endif %} 
     <ul> 
     {% for field in fieldset %} 
      {% if field.is_hidden %} 
       {{ field }} 
      {% else %} 
       <li{{ field.row_attrs }}> 
       {{ field.errors }} 
       {{ field.label_tag }}<br> 
       {{ field }} 
       </li> 
      {% endif %} 
     {% endfor %} 
     </ul> 
     </fieldset> 
    {% endfor %} 

Answer 2

你需要使用JavaScript從客戶端點擊事件觸發字段集的可見性。 jQuery的toggle函數應該對此很好地工作。