最小化django管理中的列表过滤器

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

list\u filter

）

但是，在有很多字段的视图上，我真的希望能够通过单击来最小化/扩展它，以保存屏幕的不动产，还因为它有时实际上隐藏了内容

---

有没有一种简单的方法可以添加折叠按钮（一些我还没有找到的现有插件或类似的东西）？

鉴于您现在在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\u filter\u collapse.js文件放在您的STATIC\u DIRS或STATIC\u ROOT（取决于您的Django版本）中的'js'文件夹中。

我更改了Jj的答案，在单击'filter'标题时折叠整个过滤器，为完整起见，将其添加到此处，这里提供了一个要点：

多亏了@JJ的创意。 我为整个窗口添加了切换，比@abyx的实现更简单

通过单击“过滤器”标题切换整个过滤器

通过单击列表标题切换每个列表

---

这是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);

---

对此做了另一个更改，以便在单击顶部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);

---

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

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

---

将fanlix溶液改为：

将光标显示为悬停时的指针

默认情况下折叠

代码

---

结合了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);

（函数（$）{$（文档）.ready（函数（）{
//从只显示h3字幕的过滤器列表开始；单击任何
//显示该筛选器的内容；再次单击可折叠列表：
$（'#变更列表筛选器>h3'）。每个（函数（）{
变量$title=$（本）；
$title.next（）.toggle（）；
$title.css（“光标”、“指针”）；
$title.单击（函数（）{
$title.next（）.slideToggle（）；
});
});
//在标题后添加帮助：
$（“#变更列表过滤器>h2”）.append（（单击以隐藏/取消隐藏）”；
//使标题可单击以隐藏整个过滤器：
var toggle_flag=true；
$（“#更改列表筛选器>h2”）。单击（函数（）{
切换_标志=！切换_标志；
$（'#变更列表筛选器'）。查找（'>h3'）。每个（函数（）{
$（this）.toggle（toggle_标志）；
});
});
});
})（django.jQuery）；

我为菜单折叠和单元素菜单折叠编写了一个代码段

这是abyx代码的一个分支，我刚刚扩展了它

如果之前激活了过滤器，则与此相关的元素菜单将在打开时启动

默认情况下，“过滤器”菜单开始关闭。 希望这有帮助

---

朱塞佩·德马尔科的片段效果最好。因此，我在这里添加了他的代码片段，以便于访问。它甚至解决了joelg上面讨论的问题（缺点）：

//复制自
// https://github.com/peppelinux/Django-snippets/tree/master/django-admin.js-snippets
（函数（$）{
变量元素_2_collapse='#变更列表过滤器'；
变量元素头='h2'
变量过滤器标题='h3'
//这是在过滤器菜单折叠后调整整个表格大小所必需的
变量更改列表=“#更改列表”
ListFilterCollapsePrototype={
bindToggle:function（）{
var=这个；
这是.$filterTitle.click（函数（）{
//检查某些ul是否折叠
//在滑动之前打开它，然后一起切换
$（元素2折叠）。子元素（'ul'）。每个（函数（）{
如果（$（this）.is（“：hidden”））
{
$（this.slideToggle（）；
}            
})
//现在滑动切换所有
那就是.$filterContentTitle.slideToggle（）；
那就是.$filterContentElements.slideToggle（）；
即.$list.toggleClass（'filtered'）；
});
},
初始化：函数（filterEl）{
这个.$filterTitle=$（filterEl）.children（元素头）；
此.filterContentTitle=$（filterEl）.children（filter\u title）；
这是。$filterContentElements=$（filterEl）.children（'ul'）；
$（this.$filtertite）.css（'cursor'，'pointer'）；
此.$list=$（更改列表）；
//收割台塌陷
这个.bindtowle（）；
//可折叠儿童
$（元素\u 2\u折叠）。子元素（过滤器\u标题）。每个（函数（）{
变量$title=$（本）；
$title.单击（函数（）{
$title.next（）.slideToggle（）；
});
$title.css（'border-bottom'，'1px纯灰'）；
$title.css（'padding-bottom'，'5px'）；
$title.css（'cursor'，'pointer'）；
});
}
}
函数列表FilterCollapse（filterEl）{
this.init（filterEl）；
}
ListFilterCollapse.prototype=ListFilterCollapsePrototype；
$（文档）.ready（函数（）{
$（元素\u 2\u折叠）。每个（函数（）{
(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);

(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);