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

Question

我非常喜欢django admin views(list_filter)的过滤功能.

但是,对于有很多字段的视图,我真的希望能够通过点击最小化/扩展它,以节省屏幕空间,还因为它有时实际上隐藏了东西.

是否有一种简单的方法来添加折叠按钮(一些我已经没有找到的插件或类似的东西)？

Answer 1

鉴于你现在在django admin中有jQuery,很容易将a绑定slideToggle()到List Filter中的标题.

这似乎足够的Javascript工作:

// 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子类中,您要激活设置Media内部类:

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

确保将list_filter_collapse.js文件放在STATIC_DIRS或STATIC_ROOT内的'js'文件夹中(取决于您的Django版本)

Answer 2

我改变了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 3

我已经写了一个可以在bitbucket上下载的小片段.

过滤器的状态存储在cookie中,选定的过滤器保持可见.

Answer 4

感谢@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);