Question

我使用django-form-utils生成BetterModelForm，其字段集类似于django admin。使用BetterModelForm，可以将CSS与fieldset与'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 %}

Answer 1

您需要使用JavaScript来切换来自客户端点击事件的字段集的可见性。 jQuery的toggle函数应该可以很好地用于此。

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

Django - 如何折叠django管理员中的表单

2 个答案: