Available only in PRO Edition

Multiselect

Контрол доступен для пользователей Webix Pro.

Справочник по API

Обзор

Multiselect - это не редактируемый контрол, который позволяет выбирать множество опций из отображаемого в специальном выпадающем окне списка.

Multiselect наследуется от richselect и обладает следующими функциями:

  • каждой опции соответствует отдельный чекбокс (можно настраивать, подробности ниже);
  • чтобы выбрать опцию, можно как кликнуть по элементу списка, так и проставить отметку в соответствующем чекбоксе. Выбранная опция будет добавлена в инпут;
  • чтобы удалить опцию, снимите выделение опции в списке.

Инициализация

{ view:"multiselect", id:"multi", label:"Participant", options:[
    { id:1, value:"Alex Brown" },
    { id:2, value:"Dan Simons" },
    { ... }              
], value:"1,3" }

Related sample:  Multi-select input

Основные свойства

  • value (string) - задает начальное значение для контрола. Чтобы задать несколько значений, строка может быть разделена запятой (",");
  • label (string) - задает текст ярлыка. Можно настроить с помощью:
    • labelAlign (string) - выравнивание ярлыка внутри его контейнера. Возможные значения "left" и "right". По умолчанию ярлык расположен слева от контрола.
    • labelWidth (number) - ширина контейнера ярлыка;
    • labelPosition (string) - определяет расположение ярлыка по отношению к контролу. Возможное значение - "top";
  • placeholder (string) - текст плейсхолдера для поля ввода, исчезает по мере ввода символов в поле;
  • options или suggest (array, object) - определяет список опций для компонента, или источник данных, или продвинутые настройки попапа;
  • optionWidth (number) - задает ширину списка с опциями. По умолчанию подстраивается под ширину контрола;
  • button (boolean) - если установлено true, окно Multiselect будет закрываться по клику на кнопку "Select". Подробнее.

Настройка Suggest List

Webix API позволяет использовать для Multiselect другой список с опциями - Multisuggest:

webix.ui({
  view:"multiselect", suggest:{
    view:"multisuggest", data:[
      {id:1, value:"one"},
      {id:2, value:"two"}
      ]
    }
});

По умолчанию всплывающий список контрола содержит кнопку "Select", но вы можете изменять ее:

  • используя свойство buttonText можно изменить текст кнопки:
{view:"multiselect", label:"Participant",options:{
     buttonText:"Done",
     data:[]
}}
  • используя локаль, можно изменить текст для всех кнопок Multisuggests в приложении (если другое не установлено в buttonText, как в примере выше):
webix.i18n.controls.select = "Done";
webix.i18n.setLocale(); // применить локаль

После чего текстовые значения для всех кнопок и ярлыков в Multiselect будут изменены на "Done".

Подробнее о расширенных настройках всплывающих селекторов.

Доступ к Suggest List

Multiselect API позволяет получить объект попапа:

multiselect.getPopup().getBody();
// или
multiselect.getPopup().getList();

Если вы используете multisuggest, тогда его составные части (список и кнопка) доступны как:

// объект кнопки
multiselect.getPopup().getButton();
// объект списка
multiselect.getPopup().getList();

Выбрать/отменить выбор всех опций

Чтобы включить возможность выбора сразу всех опций контрола, задайте свойству selectAll значение true в объекте suggest и соответствующее поле появится в самом верху списка:

webix.ui({
    view:"multiselect", 
    options:{
        data:[
            { id:1, value:"Alex Brown" },
            { id:2, value:"Dan Simons" },
            { id:3, value:"Gron Alanski" },
            { id:4, value:"Dan Alanski" }
        ],
        selectAll:true
    },
    value:"1,3"
});

По клику на "Select All", все опции выбираются и ярлык изменяется на Unselect All, что позволяет снять выбор со всех опций.

Наверх