移动Wagtail管理列表\标题列表过滤器上的过滤器覆盖表数据

2024-03-28 09:11:28 发布

您现在位置:Python中文网/ 问答频道 /正文

enter image description here 我有一个模型,图中显示了字段。我在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

问题是列表筛选器正在覆盖数据。我想知道我是否可以将此列表过滤器作为下拉列表移动到标题中


Tags: py模型列表datemodelcodestagelist
1条回答
网友
1楼 · 发布于 2024-03-28 09:11:28

好问题,我认为这可能是Wagtail的ModelAdmin的一个潜在问题,提出一个问题可能会更好。还有一个与“崩溃状态”有关的类似问题

选项1-CSS解决方案

一个快速、仅限于css的解决方法是将内容“移动”到按钮附近的顶部。您可能希望优化以在不同的视图端口断点内工作,另外,这不是最容易访问的解决方案,但它可以让您很快达到目的

您可以通过^{}将css添加到ModelAdmin索引列表中

下面的示例方法假设这是桌面视图,用户可以“悬停”在移动到标题的列表过滤器上

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

选项2-修订模板

您可以更进一步,修改使用的模板(每个模型或所有索引页)。见^{} Overriding Templates文件

对于底层的index.html模板,您可以看到^{}的源代码

下面的示例扩展了默认索引模板,并使块filters不呈现任何内容。然后,查看源代码,复制过滤器的渲染方式,并将其放入块header_extra

首先,内容被放在一个具有属性data-dropdown的div中,该属性将在下拉列表中呈现内部内容,第一个元素是“触发器”,第二个元素是选项

注意:这是一个粗略的示例,可能需要进一步的样式和元素属性

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

相关问题 更多 >