Комбинированные фильтры и вторичные фильтры с использованием изотопа j-запроса - PullRequest
Новая
       12

Комбинированные фильтры и вторичные фильтры с использованием изотопа j-запроса

2 голосов
/ 21 марта 2012

Я хотел бы отфильтровать список людей с изотопом, основываясь как на выполняемой ими работе, так и на подкатегории типов в рамках этой работы и местоположения.Основываясь на категории верхнего уровня, я бы хотел, чтобы пользователь мог фильтровать, используя вторичную категорию.Категории могут выглядеть примерно так:

Категории верхнего уровня 

Job category: Any, Office worker, Laborer, Healthcare worker

Location: Any, West, East, North

Категории вторичного уровня: 

Office worker job types: Any, Secretary, Midlevel, Executive

Laborer job types: Any, Construction, Demolition, Transportation

Healthcare worker job types: Any, Doctor, Nurse, Admin

Итак, кто-то может быть помечен как: Офисный работник, Секретарь, Запад или: Рабочий, Разрушение, Север

Вот некоторые примеры кода для людей и фильтров: 

<div class="option-combo jobtype">
        <ul class="filter option-set clearfix " data-filter-group="jobcategory"> 
                <li><a id="jobtype" href="#filter-jobcategory-any" data-filter-value="" class="selected anyjob">any</a></li>
                <li><a id="jobtype" href="#filter-jobcategory-officeworker" data-filter-value=".officeworker" class="">Office Worker</a></li>
                <li><a id="jobtype" href="#filter-jobcategory-laborer" data-filter-value=".laborer" class="">Laborer</a></li>
                <li><a id="jobtype" href="#filter-jobcategory-healthcareworker" data-filter-value=".healthcareworker" class="">Laborer</a></li>
</div>  
<div class="option-combo officetype">
        <ul class="filter option-set clearfix " data-filter-group="officetype"> 
                <li><a id="officetype" href="#filter-officetype-any" data-filter-value="" class="selected office">any</a></li>
                <li><a id="officetype" href="#filter-officetype-secretary" data-filter-value=".secretary" class="">Secretary</a></li>
                <li><a id="officetype" href="#filter-officetype-midlevel" data-filter-value=".midlevel" class="">Midlevel</a></li>
                <li><a id="officetype" href="#filter-officetype-executive" data-filter-value=".executive" class="">Executive</a></li>
</div>
<div class="option-combo laborertype">
        <ul class="filter option-set clearfix " data-filter-group="laborertype"> 
                <li><a id="laborertype" href="#filter-laborertype-any" data-filter-value="" class="selected laborer">any</a></li>
                <li><a id="laborertype" href="#filter-laborertype-construction" data-filter-value=".construction" class="">construction</a></li>
                <li><a id="laborertype" href="#filter-laborertype-demolition" data-filter-value=".demolition" class="">demolition</a></li>
                <li><a id="laborertype" href="#filter-laborertype-transportation" data-filter-value=".transportation" class="">transportation</a><li>
</div>
<div class="option-combo healthcaretype">
        <ul class="filter option-set clearfix " data-filter-group="healthcaretype"> 
                <li><a id="healthcaretype" href="#filter-healthcaretype-any" data-filter-value="" class="selected healthcare">any</a></li>
                <li><a id="healthcaretype" href="#filter-healthcaretype-doctor" data-filter-value=".doctor" class="">doctor</a></li>
                <li><a id="healthcaretype" href="#filter-healthcaretype-nurse" data-filter-value=".nurse" class="">nurse</a></li>
                <li><a id="healthcaretype" href="#filter-healthcaretype-admin" data-filter-value=".admin" class="">admin</a></li>
</div>




<div class="option-combo location">
        <ul class="filter option-set clearfix " data-filter-group="location"> 
                <li><a id="jobtype" href="#filter-location-any" data-filter-value="" class="selected any">any</a></li>
                <li><a id="jobtype" href="#filter-location-west" data-filter-value=".west" class="">West</a></li>
                <li><a id="jobtype" href="#filter-location-east" data-filter-value=".east" class="">Midlevel</a></li>
                <li><a id="jobtype" href="#filter-location-north" data-filter-value=".north" class="">Executive</a></li>
</div>


<div id="peoplecontainer">
    <div class="person officeworker secretary west">
        John Smith
    </div>
    <div class="person laborer construction north">
        Anne Brown
    </div>
    <div class="person healthcareworker doctor east">
        Anne Brown
    </div>
</div>

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

Но проблема возникает, когда пользователь затем щелкает по другой категории работы верхнего уровня.Итак, скажем, пользователь нажал на «офисный работник» и «секретарь».Теперь пользователь хочет видеть всех работников.Когда пользователь щелкает «рабочий», фильтр вторичного офисного типа «секретарь» все еще активен, и поэтому пользователь не видит результатов.Я хочу, чтобы фильтр типа офисных заданий терял свою фильтрацию (либо становясь неактивным, либо по умолчанию «любым»), так что отображаются все люди в категории «рабочий».Затем пользователь может фильтровать по типам рабочих заданий второго уровня.

Вот изотопный запрос, который я сейчас использую.

<script>
    $(function(){
        var $filtercontainer = $('#peoplecontainer'),
        filters = {};

        $filtercontainer.isotope({
            itemSelector : '.person',
            masonry: {
                columnWidth: 80
            }
        });

        // filter buttons
        $('.filter a').click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return;
        }

        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        if($('.officeworker').hasClass('selected')){
            $('#officetype').show();
            $('#laborertype').hide();
            $('#healthcaretype').hide();

        }
        else if($('.laborer').hasClass('selected')){
            $('#officetype').hide();
            $('#laborertype').show();
            $('#healthcaretype').hide();
        }
        else if($('.healthcareworker').hasClass('selected')){
            $('#officetype').hide();
            $('#laborertype').hide();
            $('#healthcaretype').show();
        }


        // store filter value in object

        var group = $optionSet.attr('data-filter-group');
        filters[ group ] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];
        for ( var prop in filters ) {
            isoFilters.push( filters[ prop ] )
        }
        var selector = isoFilters.join('');
        $filtercontainer.isotope({ filter: selector });

        return false;
        });

    });

</script>

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

Как я могу заставить эту работу работать так, как я хочу?

...