css - Django - 如何在 django admin 中折叠表单

Question

我使用django-form-utils生成带有类似于 django admin 的字段集的 BetterModelForm。使用 BetterModelForm 可以将 CSS 与带有 'classes' 选项的字段集相关联。我想知道如何像在 Django-Admin 中那样折叠表单的字段集。

表格.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']})
                ]

模板.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

您需要使用 JavaScript 从客户端单击事件切换字段集的可见性。jQuery 的切换功能应该可以很好地解决这个问题。

Answer 2

我这样做的方式是简单地使用 django admin 的 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 %}