Выпадающий список

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

Документация API Спецификация Axure

Конфигурация

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

Конфигурация набора элементов описана здесь.

Для строки-ссылки можно определить следующие опции:

  • emptyText — к списку с заданным текстом добавляет пустой элемент.
  • displayProperty — название поля, значение которого отображается при выборе элемента из списка,
  • selectedKeys — массив значений ключевого поля выбранных записей списка,
  • contentTemplate — шаблон для отображения в строке выбранной записи.

Работа с одним ключом (опция selectedKey)

Адаптер Controls/source:SelectedKey позволяет контролу работать не с массивом selectedKeys, а с одним ключом selectedKey. Для корректной работы необходимо контрол обернуть в адаптер; значение selectedKey настраивается у адаптера.

Cобытие адаптера selectedKeyChanged позволяет обработать изменение выбранного ключа.

<!-- WML -->
<Controls.source:SelectedKey bind:selectedKey="_selectedKey">
   <Controls.dropdown:Selector
      keyProperty="id"
      parentProperty="parent"
      nodeProperty="@parent"
      source="{{_createMemory(_hierarchySource)}}"/>
</Controls.source:SelectedKey>
// TypeScript
protected _beforeMount(): void {
   this._selectedKey = 25;
}

Выпадающий список с множественным выбором

Для создания выпадающего списка с множественным выбором используется Controls/dropdown:Selector.
Множественный выбор включается опцией multiSelect.

<!-- WML -->
<Controls.dropdown:Selector
    bind:selectedKeys="_selectedKeys"
    keyProperty="id"
    displayProperty="title"
    source="{{_source}}"
    multiSelect="{{true}}"/>
// TypeScript
import {Memory} from 'Types/source';

export default class extends Control {
    protected _source: null;
    protected _selectedKeys: null;
    protected _beforeMount(): void {
        this._source = new Memory({
            keyProperty: 'id',
            data: [
                {id: 1, title: 'Ярославль'},
                {id: 2, title: 'Москва'},
                {id: 3, title: 'Санкт-Петербург'},
                {id: 4, title: 'Адыгея Респ.'}
            ]
        });
        this._selectedKeys = [1, 2, 3];
    }
}

Закрытие всплывающего списка

Всплывающий список Controls/dropdown:Selector можно закрыть событием close, которое вызывается компонентом, находящимся внутри nodeFooterTemplate.

В обработчике клика по элементу следует вызвать:

// TypeScript
this._notify("close", [], {bubling: true})