Клуб API Карт

Управление фильтрами через control ListBox (РЕШЕНО)

Пост в архиве.

Делаю кнопку с выпадающим списком. список содержит пункты по которым можно фильтровать:

           var cityList = new ymaps.control.ListBox({
        data: {
            content: 'Фильтр'
        },
        items: [
            new ymaps.control.ListBoxItem({data: {
                content: 'type1',
            }}),
        new ymaps.control.ListBoxItem({data: {
                content: 'type2',
            }}),
        new ymaps.control.ListBoxItem({data: {
                content: 'type3',
            }})],
        options: {
            float: "left"
        }
    });
        myMap.controls.add(cityList);
    cityList.get(0).events.add('click', checkState);
    cityList.get(1).events.add('click', checkState);
    cityList.get(2).events.add('click', checkState);

 фильтр делаю через проверку состояния, отмечен ли пункт, к примеру первый, аналогичный код для остальных пунктов:

        if (cityList.get(0).state.get('selected'))
        {           ----------------------     какой то код      ------------------      }
        if (cityList.get(1).state.get('selected'))
       {           ----------------------     какой то код      ------------------      }
       if (cityList.get(2).state.get('selected'))
     {           ----------------------     какой то код      ------------------      }

 И ловлю событие клика:

    cityList.get(0).events.add('click', checkState);
    cityList.get(1).events.add('click', checkState);
    cityList.get(2).events.add('click', checkState);

 У меня проблема в том, что при клике сначала выполняется моя функция, а потом уже отмечается пункт галочкой, таким образом код проверки фильтра (checkState) отрабатывает неправильно.

Отсюда вопрос, как сделать так, что бы сначала проставлялась/убиралась калочка выбора, а потом отрабатывала функция.

Заранее спасибо.

10 комментариев
Всеволод Шмыров
27 января 2016, 22:57
Добрый день. Вы можете отключить установку галочки по клику самостоятельно при помощи опции
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.ListBoxItem-docpage/#param-parameters.options.selectOnClick
а в своем обработчике клика устанавливать состояние "selected" самостоятельно
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.ListBoxItem-docpage/#param-parameters.state.selected

В этом то как раз и проблема:

selectOnClick

true - элемент списка выделяется после клика и меняет значение поля control.ListBoxItem.state 'selected';

То есть events.add('click') - выполнится быстрее чем галочка будет проставлена.

Можно ли сделать что бы поле выделялось вместе с кликом?

Или  предлагаете делать это в ручном режиме? Если не сложно пример как это сделать при клике: Сначала проставить галочку, а потом выполнить функцию checkState.

Всеволод Шмыров
27 января 2016, 22:57
Я имел в виду поставить selectOnClick в false, а в вашем слушателе вручную менять состояние "selected" после проверки.
e.get('target').state.set('selected', true);

К сожалению, я не понимаю, как это реализовать.

делаю так:

 cityList.events.add('click', checkState);

работает как в предыдущем случае.

Делаю так:

 cityList.events.add('click', function (e){
             if (e.get('target').state.get('selected',false)){e.get('target').state.set('selected',true);
    }
    else {e.get('target').state.set('selected',false);};
    checkState;
 });

Перестает работать функция checkState

Всеволод Шмыров
27 января 2016, 22:57
а что значит строчка ? checkState; если вы вызываете функцию, то нужно вызвать checkState();

а, да это я упустил, но тем неменее, checkState всё равно не считывает последнее нажатие.

То есть у меня 3 пункта фильтров.

Если при загрузки карты они все проставлены и нажимаю убрать галочку с первого - то ни чего не происходит.

Потом жму убрать со второго - тогда отрабатывает только первый

и так далее

 

          var cityList = new ymaps.control.ListBox({

        data: {

            content: 'Фильтр'

        },

        items: [

            new ymaps.control.ListBoxItem({data: {

                content: 'type1',

            }}), 

        new ymaps.control.ListBoxItem({data: {

                content: 'type2',

            }}),

        new ymaps.control.ListBoxItem({data: {

                content: 'type3',

            }})],

        options: {

            float: "left"

        }

    });

        myMap.controls.add(cityList);

        cityList.events.add(['select', 'deselect'], function (e) {

            var selectedFilters = cityList.filter(function (it) {

                return it.isSelected();

            });

            applyFilters(selectedFilters);

        });

        

        function applyFilters(filters) {

            filters.forEach(function (filter) {

                switch(filter.data.get('content')) {

                    case 'type1':

                        console.log('something 1');

                        break;

                    case 'type2':

                        console.log('something 2');

                        break;

                    case 'type3':

                        console.log('something 3');

                        break;

                }

            })

        }

Спасибо, Вариант отличный, только он отрабатывает когда идет select, если убираешь галочку, то не работает.

 По сути нужно обрабатывать не селект, а какой то деселект

Вместо

cityList.events.add('select'

нужно

cityList.events.add(['select', 'deselect']

я поправил в коде

Спасибо большое.

Всё получилось.