Сверните фильтр списка в django-admin

Question

Мне очень нравится функция фильтрации представлений администратора django (list_filter).

Но для представлений с большим количеством полей мне бы очень хотелось иметь возможность свернуть / развернуть его одним щелчком мыши,чтобы сохранить экранную недвижимость, а также потому, что иногда она действительно скрывает вещи.

Есть ли простой способ добавить кнопку свертывания (какой-то уже существующий плагин, который я не нашел, или что-то подобное)?

Answer 1

Учитывая, что теперь у вас есть jQuery в django admin, легко связать slideToggle() с заголовками в фильтре списка.

Кажется, этого достаточно для работы 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 помещен в папку 'js' внутри файла STATIC_DIRS или STATIC_ROOT.(В зависимости от вашей версии Django)

Answer 2

Я написал для этого небольшие фрагменты, которые можно загрузить на bitbucket .

Состояние фильтров сохраняется в файле cookie, а выбранные фильтры остаются видимыми.

Answer 3

Я изменил ответ 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 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);

Answer 5

Комбинированные подходы Тима и МаГо с некоторыми хитростями:

Плюсы:

• Позволяет пользователю скрыть весь список (в заголовок списка фильтров добавлено «щелкнуть, чтобы скрыть / показать», чтобы пользователь знал, что делать).
• По умолчанию поддерживает категории сложенных фильтров

Минусы:

• При обновлении страницы после выбора фильтра категории фильтров снова сворачиваются; в идеале те, с которыми вы работаете, должны оставаться открытыми.

код:

(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 6

Модифицированное решение 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 7

Сделано еще одно изменение в этом, чтобы скрыть H3, а также списки фильтров, когда вы нажимаете на верхней H2. Это приведет к удалению всего списка фильтров, если вы нажмете на «Фильтры» вверху.

Это содержимое файла 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 8

Я написал фрагменты для свертывания меню и свертки меню из одного элемента.

Это форк из абикс-кода, я только что расширил его.

Если фильтр ранее активировал элементсвязанное с этим меню начнется как открытое.

Меню фильтра по умолчанию закрывается.Надеюсь, это поможет

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