1

django-form-utilsを使用して、djangoadminと同様のフィールドセットを持つBetterModelFormを生成します。BetterModelFormを使用すると、CSSを「classes」オプションを使用してフィールドセットに関連付けることができます。Django-Adminでできるように、フォームのフィールドセットを折りたたむ方法を知りたいです。

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 %}
4

2 に答える 2

2

私がやった方法は、djangoadminの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 %}
于 2013-02-19T21:32:42.187 に答える
2

クライアント側のクリック イベントからフィールドセットの表示を切り替えるには、JavaScript を使用する必要があります。jQuery のトグル機能は、これに対して非常にうまく機能するはずです。

于 2013-02-18T02:26:02.280 に答える