我有一个模型,其字段如图所示。我在 wagtail_hooks.py 中创建了以下 ModelAdmin。
class opportunitiesAdmin(ModelAdmin):
model = opportunities
menu_label='Opportunities'
menu_icon='fa-briefcase'
list_display = ['reference_no','stage','opportunity_name','expected_value','probability','BDM','sector_code','service_code','source_code','date_entered','close_date']
list_filter = ('stage',)
menu_order=435
问题是列表过滤器覆盖了数据。我想知道我能否把这个列表过滤器移到头部作为一个下拉菜单。
很好的问题,我想这可能是Wagtail的一个潜在问题。ModelAdmin
并提出一个问题可能是好的。有一个类似的问题与 "崩溃状态 "有关。此处.
一个快速的,只有css的解决办法是将内容 "移动 "到按钮附近的顶部。你可能会想在不同的视图端口断点处进行改进,另外这不是最容易使用的解决方案,但它能让你快速达到目的。
您可以将 css 添加到 ModelAdmin
索引列表 index_view_extra_css
.
下面的示例方法假设这是桌面视图,用户可以将鼠标 "悬停 "在移动到页眉的列表过滤器上。
wagtail_hooks.py
class opportunitiesAdmin(ModelAdmin):
model = opportunities
#...
index_view_extra_css = ('css/modeladmin-index.css',)
static/css/modeladmin-index.css
@media screen and (min-width: 50em) {
.changelist-filter {
position: fixed;
top: 0;
right: 15rem;
z-index: 1;
background: white;
transform: translateY(-100vh);
}
.changelist-filter h2 {
margin-top: 1rem;
transform: translateY(100vh);
}
.changelist-filter:hover {
transform: none;
}
.changelist-filter:hover h2 {
margin-top: 0;
transform: none;
}
}
您可以更进一步,修改所使用的模板(无论是在每个模型或所有索引页的基础上)。请看 ModelAdmin
覆盖模板 docs。
对于基本的 index.html
模板的来源,你可以看到 contrib/modeladmin/templates/modeladmin/index.html
.
下面的示例扩展了默认的索引模板,并使块 filters
什么也不渲染。然后,从源头看,复制滤镜的渲染方式,并把它们放在块中。header_extra
.
作为一个开始,内容已经被放在一个带有属性的div中。data-dropdown
它将在下拉菜单中呈现内部内容,第一个元素是 "触发器",第二个是选项。
注意:这是一个粗略的例子,还需要进一步的样式设计和元素属性。
templates/modeladmin/index.html
{% extends 'modeladmin/index.html' %}
{% load i18n modeladmin_tags %}
{% block header_extra %}
{% if view.has_filters and all_count %}
<div {{ self.attrs }} class="c-dropdown" data-dropdown>
<a href="javascript:void(0)" class="c-dropdown__button u-btn-current">
<strong>{% trans 'Filter' %}</strong>
<div data-dropdown-toggle="" class="o-icon c-dropdown__toggle [ icon icon-arrow-down ]"></div>
</a>
<div class="c-dropdown__menu u-toggle u-arrow u-arrow--tl u-background">
{% for spec in view.filter_specs %}{% admin_list_filter view spec %}{% endfor %}
</div>
</div>
{% endif %}
{{ block.super }}
{% endblock %}
{% block filters %}
{% comment %} make content blank {% endcomment %}
{% endblock %}