Django Admin - 将折叠添加到字段集,但使其开始展开

问题描述 投票:0回答:9

有没有办法使字段集可折叠,但开始展开?当您向字段集类添加折叠时,它会获得功能但开始折叠。我查看了显示/隐藏字段集内容的 JS,但看起来没有任何东西可以做我想做的事情,所以我假设我必须滚动我的自己的。只是想在我付出努力之前检查一下。

django django-admin
9个回答
15
投票

admin.py:

class PageAdmin(admin.ModelAdmin):
    fieldsets = (
        (None, {
            'fields': ('title', 'content', )
        }),
        ('Other Informations', {
            'classes': ('collapse', 'open'),
            'fields': ('slug', 'create-date',)
        }),
    )

templates/app_label/model_name/change_form.html:

{% extends "admin/model_name/change_form.html" %}

{% block extrahead %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}admin/js/collapse-open.js" type="text/javascript"></script>
{% endblock %}

静态/admin/js/collapse-open.js:

(function($) {
    $(document).ready(function() {
        $('fieldset.collapse.open').removeClass('collapsed');
    });
})(django.jQuery);

13
投票

我知道这确实很旧,但我也刚刚遇到这个问题。经过深思熟虑后,我找到了一个简单的解决方案,似乎只需 0 个插件或额外的 js 即可完成工作。

在字段集构造中将“collapse in”而不是“collapse”添加到类中:

fieldsets = [
    ('Start Expanded', {
    'fields': ['field1', 'field2', 'field3'], 
    'classes': ['collapse in',]
    })
]


5
投票

django-grappelli 将此作为功能之一提供。这是关于“Collapsibles”的文档


4
投票

按照 grappelli 文档 只需要添加“类”:('grp-collapse grp-filled')

例如

class EntryOptions(admin.ModelAdmin):
   ...
   fieldsets = (
     ('', {
        'fields': ('title', 'subtitle', 'slug', 'pub_date', 'status',),
     }),
     ('Flags', {
        'classes': ('grp-collapse grp-closed',),
        'fields' : ('flag_front', 'flag_sticky', 'flag_allow_comments',),
    }),

注意:如果您使用grappelli版本< 2.4 use 'grp-closed' instead 'collapse-closed'* actually 'collapse-close' still is working but is recommended to use the new classes


2
投票

从 Setomidor 的答案开始,我想建议一个更简单的替代方案,它完全可以满足您的需求(显然,如果 Grappelli 不是一个选择)。

按照说明创建模板覆盖(

admin/(app)/(model)/change_form.html
)并且不要删除“添加”模型案例的可折叠效果,只需调用字段集折叠器的单击方法(即带有显示的小链接) /隐藏文本)以在页面加载后立即展开整个字段集。


1
投票

我能找到的最快的方法是向字段集中添加一个新类

start-open

classes = ['collapse', 'start-open']

然后修改

static/admin/js/collapse.js

来自:

    // Add toggle to anchor tag
    var toggles = document.querySelectorAll('fieldset.collapse a.collapse-toggle');
    var toggleFunc = function(ev) {
        ev.preventDefault();
        var fieldset = closestElem(this, 'fieldset');
        if (fieldset.classList.contains('collapsed')) {
            // Show
            this.textContent = gettext('Hide');
            fieldset.classList.remove('collapsed');
        } else {
            // Hide
            this.textContent = gettext('Show');
            fieldset.classList.add('collapsed');
        }
    };
    for (i = 0; i < toggles.length; i++) {
        toggles[i].addEventListener('click', toggleFunc);
    }

至:

    // Add toggle to anchor tag
    var toggles = document.querySelectorAll('fieldset.collapse a.collapse-toggle');
    // NEW: select toggles to open
    var open_toggles = document.querySelectorAll('fieldset.collapse.start-open a.collapse-toggle');
    var toggleFunc = function(ev) {
        ev.preventDefault();
        var fieldset = closestElem(this, 'fieldset');
        if (fieldset.classList.contains('collapsed')) {
            // Show
            this.textContent = gettext('Hide');
            fieldset.classList.remove('collapsed');
        } else {
            // Hide
            this.textContent = gettext('Show');
            fieldset.classList.add('collapsed');
        }
    };
    for (i = 0; i < toggles.length; i++) {
        toggles[i].addEventListener('click', toggleFunc);
    }
    // NEW: open toggles
    for (i = 0; i < open_toggles.length; i++) {
        toggles[i].click();
    }

0
投票

老问题,但我遇到了同样的问题并想出了一个可以使用标准 django 实现的答案:

在模板目录中创建文件:admin/(app)/(model)/change_form.html,以使您的(应用程序)的(模型)使用该表单文件。

将此代码添加到文件中:

{% extends "admin/change_form.html" %}

{% block extrahead %}
    <!-- Load superblock (where django.jquery resides) -->
    {{ block.super }}
    <!-- only do this on 'add' actions (and not 'change' actions) -->
    {% if add and adminform %}
    <script type="text/javascript">
        (function($) {
            $(document).ready(function($) {
                //Remove the 'collapsed' class to make the fieldset open
                $('.collapse').removeClass('collapsed');

                //Remove the show/hide links
                $('.collapse h2 a').remove();

                //Tidy up by removing the parenthesis from all headings
                var $headings = $(".collapse h2");
                $headings.each(function(i, current){
                    var str = $(current).text();
                    parenthesisStart = str.indexOf('(');
                    $(current).text(str.substring(0, parenthesisStart));
                });
            });                                 
        })(django.jQuery);                      
    </script>
    {% endif %}
{% endblock %}

有关使用 django.jQuery 而不是“常规”jQuery 的更多信息,请参阅: http://blog.picante.co.nz/post/Customizing-Django-Admin-with-jQuery--Getting--is-not -a-函数/


0
投票

所以这个对我有用:

class PageAdmin(admin.ModelAdmin):
    fieldsets = (
        (None, {
            'fields': ('title', 'content', )
        }),
        ('Other Informations', {
            'classes': ('wide'),
            'fields': ('slug', 'create-date',)
        }),
    )

0
投票

对于 django 4.x,这是我的 admin/js/collapse.js 在类中添加start-open

'use strict';
{
    window.addEventListener('load', function() {
        // Add anchor tag for Show/Hide link
        const fieldsets = document.querySelectorAll('fieldset.collapse');
        // NEW: select toggles to open
        var open_toggles = document.querySelectorAll('fieldset.collapse.start-open');        
        for (const [i, elem] of fieldsets.entries()) {
            // Don't hide if fields in this fieldset have errors
            if (elem.querySelectorAll('div.errors, ul.errorlist').length === 0) {
                if (elem.classList[3] != 'start-open') {
                    elem.classList.add('collapsed');
                }
                const h2 = elem.querySelector('h2');
                const link = document.createElement('a');
                link.id = 'fieldsetcollapser' + i;
                link.className = 'collapse-toggle';
                link.href = '#';
                if (elem.classList[3] != 'start-open') {
                    link.textContent = gettext('Show');
                } else {
                    link.textContent = gettext('Hide');
                }
                h2.appendChild(document.createTextNode(' ('));
                h2.appendChild(link);
                h2.appendChild(document.createTextNode(')'));
            }
        }
        // Add toggle to hide/show anchor tag
        const toggleFunc = function(ev) {
            if (ev.target.matches('.collapse-toggle')) {
                ev.preventDefault();
                ev.stopPropagation();
                const fieldset = ev.target.closest('fieldset');
                if (fieldset.classList.contains('collapsed')) {
                    // Show
                    ev.target.textContent = gettext('Hide');
                    fieldset.classList.remove('collapsed');
                } else {
                    // Hide
                    ev.target.textContent = gettext('Show');
                    fieldset.classList.add('collapsed');
                }
            }
        };
        document.querySelectorAll('fieldset.module').forEach(function(el) {
            el.addEventListener('click', toggleFunc);
        });
    });
}   
© www.soinside.com 2019 - 2024. All rights reserved.