最小化 django-admin 中的列表过滤器

Question

我非常喜欢 django 管理视图的过滤功能（list_filter）。

但是，在具有很多字段的视图上，我真的很希望能够通过单击来最小化/展开它，以节省屏幕空间，而且因为它有时实际上会隐藏一些东西。

有没有一种简单的方法来添加折叠按钮（我还没有找到一些已经存在的插件或类似的东西）？

Answer 1

对此进行了另一项更改，以便当您单击顶部的 H2 时隐藏 H3 以及过滤器列表。如果您单击顶部的“过滤器”，这将使整个过滤器列表消失。

这是js文件内容

;(function($){ $(document).ready(function(){
    $('#changelist-filter > h3').each(function(){
        var $title = $(this);
        $title.click(function(){
            $title.next().slideToggle();
        });
    });
    var toggle_flag = true;
    $('#changelist-filter > h2').click(function () {
        toggle_flag = ! toggle_flag;
        $('#changelist-filter').find('> ul, > h3').each(function(){
                $(this).toggle(toggle_flag);
        });
    });
  });
})(django.jQuery);

Answer 2

修改 fanlix 解决方案为：

1. 将光标显示为悬停时的指针
2. 默认折叠

代码

(function($){ $(document).ready(function(){
    $('#changelist-filter > h3').each(function(){
        var $title = $(this);
        $title.next().toggle();
        $title.css("cursor","pointer");
        $title.click(function(){
            $title.next().slideToggle();
        });
    });
    var toggle_flag = false;
    $('#changelist-filter > h2').css("cursor","pointer");
    $('#changelist-filter > h2').click(function () {
        toggle_flag = ! toggle_flag;
        $('#changelist-filter > ul').each(function(){
            $(this).slideToggle(toggle_flag);
        });
    });
  }); 
})(django.jQuery);

Answer 3

结合了 Tim 和 maGo 的方法，并进行了一些调整：

优点：

• 允许用户隐藏整个列表（在过滤器列表标题中添加“单击隐藏/取消隐藏”，以便用户知道要做什么）。
• 默认保持折叠的过滤器类别

缺点：

• 选择过滤器后刷新页面会导致过滤器类别再次折叠；理想情况下，与您一起工作的人会保持开放状态。

代码：

(function($){ $(document).ready(function(){

    // Start with a filter list showing only its h3 subtitles; clicking on any
    // displays that filter's content; clicking again collapses the list:
    $('#changelist-filter > h3').each(function(){
        var $title = $(this);
        $title.next().toggle();
        $title.css("cursor","pointer");
        $title.click(function(){
            $title.next().slideToggle();
        });
    });

    // Add help after title:
    $('#changelist-filter > h2').append("<span style='font-size: 80%; color: grey;'> (click to hide/unhide)</span>");

    // Make title clickable to hide entire filter:
    var toggle_flag = true;
    $('#changelist-filter > h2').click(function () {
        toggle_flag = ! toggle_flag;
        $('#changelist-filter').find('> h3').each(function(){
                $(this).toggle(toggle_flag);
        });
    });
  });
})(django.jQuery);

Answer 4

我编写了菜单折叠和单元素菜单折叠的片段。

它是 abyx 代码的一个分支，我刚刚对其进行了扩展。

如果先前激活了过滤器，则与此相关的元素菜单将按打开状态启动。

过滤器菜单默认关闭。
希望这有帮助

https://github.com/peppelinux /Django-snippets/tree/master/django-admin.js-snippets

Answer 5

Giuseppe De Marco 的片段效果最好。所以我在这里添加他的代码片段以便于访问。它甚至解决了 joelg 上面讨论的问题（缺点）：

// Copied from 
// https://github.com/peppelinux/Django-snippets/tree/master/django-admin.js-snippets

(function($){
    
    var element_2_collapse = '#changelist-filter';
    var element_head       = 'h2'
    var filter_title       = 'h3'
    
    // this is needed for full table resize after filter menu collapse
    var change_list        = '#changelist'
    
    
    ListFilterCollapsePrototype = {
        bindToggle: function(){
            var that = this;
            this.$filterTitle.click(function(){
                
                // check if some ul is collapsed
                // open it before slidetoggle all together
                $(element_2_collapse).children('ul').each(function(){
                    if($(this).is(":hidden"))
                        {
                            $(this).slideToggle();
                        }            
                })
                
                // and now slidetoggle all 
                that.$filterContentTitle.slideToggle();
                that.$filterContentElements.slideToggle();            
                that.$list.toggleClass('filtered');
    
            });
    
        },
        init: function(filterEl) {
            this.$filterTitle = $(filterEl).children(element_head);
            this.$filterContentTitle = $(filterEl).children(filter_title);
            this.$filterContentElements = $(filterEl).children('ul');
            $(this.$filterTitle).css('cursor', 'pointer');
            this.$list = $(change_list );
            
            // header collapse
            this.bindToggle();
        
            // collapsable childrens 
            $(element_2_collapse).children(filter_title).each(function(){
                var $title = $(this);
                $title.click(function(){
                    $title.next().slideToggle();
                            
                });
            
            $title.css('border-bottom', '1px solid grey');
            $title.css('padding-bottom', '5px');
            $title.css('cursor', 'pointer');     
            
            });
        
        
            
        }
    }
    function ListFilterCollapse(filterEl) {
        this.init(filterEl);
    }
    ListFilterCollapse.prototype = ListFilterCollapsePrototype;
    
    $(document).ready(function(){
        $(element_2_collapse).each(function(){
            var collapser = new ListFilterCollapse(this);
        });
        
        // close them by default
        $(element_2_collapse+' '+element_head).click()
        
        // if some filter was clicked it will be visible for first run only
        // selezione diverse da Default
        
    
        $(element_2_collapse).children(filter_title).each(function(){
            
            lis = $(this).next().children('li')
            lis.each(function(cnt) {
              if (cnt > 0)
               {
                if ($(this).hasClass('selected')) {
                    $(this).parent().slideDown(); 
                    $(this).parent().prev().slideDown();
                    
                    // if some filters is active every filters title (h3) 
                    // should be visible
                    $(element_2_collapse).children(filter_title).each(function(){
                        $(this).slideDown(); 
                    })
                    
                    $(change_list).toggleClass('filtered');
                    
                }
               }
            })
    
        });
    
    });
    })(django.jQuery);

Answer 6

Django 4.x，这是我的做法。

1. 创建管理模板如下

   {% extends "admin/change_list.html" %} {% 阻止额外样式 %}
   {{ 块.super }}

   函数toggle_filter() {
   $("#changelist-filter").toggle("慢");
   };

   $(文档).ready(函数(){
   // 默认关闭它们
   $("#changelist-filter").toggle("快速");
   }); {% 末端嵌段 %}

2. 增强 admin/base_site.html 添加按钮

<button onclick="toggle_filter()" class="btn btn-warning btn-sm" type="submit">Toggle Filter</button>

Answer 7

由于某种原因，Javascript 无法与 Django 5 一起使用。
我最终用一些自定义 CSS 覆盖了模板，通过采用变更列表模板，效果很好。
您还可以正确地在媒体中仅添加自定义 CSS 文件。

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

{% block header %}
    {{ block.super }}

    <style>

        /* make changelist filter small by default */
        #changelist-filter {
          position: absolute;
          display: block;
          right: 0;
          border: solid rgba(255, 0, 0, 0.2) 0.5px;
          width: 8em;
          height: 2em;
        }
        /* prevent inner elements to be visible */
        #changelist-filter * {
          height: 0;
          display: none;
        }
        /* but show the filter header */
        #changelist-filter-header {
          height: auto;
          display: block;
        }
        /* when hovering, recover size again */
        #changelist-filter:hover {
          height: auto;
          width: auto;
        }
        /* and display the inner content */
        #changelist-filter:hover * {
          height: auto;
          display: block;
        }

    </style>
{% endblock %}

无悬停视图：

正常悬停视图：

Answer 8

鉴于您现在在 django admin 中拥有 jQuery，可以轻松地将 slideToggle() 绑定到列表过滤器中的标题。

这似乎足以让它工作：

// Fancier version https://gist.github.com/985283 

;(function($){ $(document).ready(function(){
    $('#changelist-filter').children('h3').each(function(){
        var $title = $(this);
        $title.click(function(){
            $title.next().slideToggle();
        });
    });   
  });
})(django.jQuery);

然后在 ModelAdmin 子类中，您想要激活设置媒体内部类：

class MyModelAdmin(admin.ModelAdmin):
  list_filter = ['bla', 'bleh']
  class Media:
    js = ['js/list_filter_collapse.js']

确保将 list_filter_collapse.js 文件放在 STATIC_DIRS 内的“js”文件夹中或 STATIC_ROOT （取决于您的 Django 版本）

Answer 9

我更改了 Jj 的答案，以在单击“过滤器”标题时折叠整个过滤器，为了完整性将其添加到此处，要点如下 这里：

(function($){
ListFilterCollapsePrototype = {
    bindToggle: function(){
        var that = this;
        this.$filterTitle.click(function(){
            that.$filterContent.slideToggle();
            that.$list.toggleClass('filtered');
        });
    },
    init: function(filterEl) {
        this.$filterTitle = $(filterEl).children('h2');
        this.$filterContent = $(filterEl).children('h3, ul');
        $(this.$filterTitle).css('cursor', 'pointer');
        this.$list = $('#changelist');
        this.bindToggle();
    }
}
function ListFilterCollapse(filterEl) {
    this.init(filterEl);
}
ListFilterCollapse.prototype = ListFilterCollapsePrototype;

$(document).ready(function(){
    $('#changelist-filter').each(function(){
        var collapser = new ListFilterCollapse(this);
    });
});
})(django.jQuery);

Answer 10

为此，我编写了一个小片段，可在 bitbucket 上下载。

过滤器的状态存储在 cookie 中，并且所选过滤器保持可见。

Answer 11

感谢@JJ的想法。
我为整个窗口添加了切换开关，比 @abyx 的实现更简单。

1. 通过单击“过滤器”标题切换整个过滤器
2. 通过单击列表标题切换每个列表

---

这是 js 文件内容：

;(function($){ $(document).ready(function(){
    $('#changelist-filter > h3').each(function(){
        var $title = $(this);
        $title.click(function(){
            $title.next().slideToggle();
        }); 
    });   
    var toggle_flag = true;
    $('#changelist-filter > h2').click(function () {
        toggle_flag = ! toggle_flag;
        $('#changelist-filter > ul').each(function(){
                $(this).toggle(toggle_flag);
        }); 
    });   
  }); 
})(django.jQuery);