有没有办法使字段集可折叠,但开始展开?当您向字段集类添加折叠时,它会获得功能但开始折叠。我查看了显示/隐藏字段集内容的 JS,但看起来没有任何东西可以做我想做的事情,所以我假设我必须滚动我的自己的。只是想在我付出努力之前检查一下。
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);
我知道这确实很旧,但我也刚刚遇到这个问题。经过深思熟虑后,我找到了一个简单的解决方案,似乎只需 0 个插件或额外的 js 即可完成工作。
在字段集构造中将“collapse in”而不是“collapse”添加到类中:
fieldsets = [
('Start Expanded', {
'fields': ['field1', 'field2', 'field3'],
'classes': ['collapse in',]
})
]
django-grappelli 将此作为功能之一提供。这是关于“Collapsibles”的文档。
按照 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
从 Setomidor 的答案开始,我想建议一个更简单的替代方案,它完全可以满足您的需求(显然,如果 Grappelli 不是一个选择)。
按照说明创建模板覆盖(
admin/(app)/(model)/change_form.html
)并且不要删除“添加”模型案例的可折叠效果,只需调用字段集折叠器的单击方法(即带有显示的小链接) /隐藏文本)以在页面加载后立即展开整个字段集。
我能找到的最快的方法是向字段集中添加一个新类
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();
}
老问题,但我遇到了同样的问题并想出了一个可以使用标准 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-函数/
所以这个对我有用:
class PageAdmin(admin.ModelAdmin):
fieldsets = (
(None, {
'fields': ('title', 'content', )
}),
('Other Informations', {
'classes': ('wide'),
'fields': ('slug', 'create-date',)
}),
)
对于 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);
});
});
}