Войти

Конфигурация набора элементов для выпадающих списков

Источник данных

Пример
Исходный код

Набор элементов для меню, кнопки с меню и выпадающих списков устанавливается с помощью опции source.

<!-- WML -->
<Controls.dropdown:Button
   source="{{_source}}" />
// TypeScript
protected _beforeMount(): void {
   this._source = new Memory({
      keyProperty: 'key',
      data: [
         {key: '1', icon: 'icon-EmptyMessage', iconStyle: 'info', title: 'Message'},
         {key: '2', title: 'Report'},
         {key: '3', icon: 'icon-TFTask', title: 'Task'},
         {key: '4', title: 'News', readOnly: true},
         {key: null, title: 'Note'}
      ]
   });
}

С помощью опции keyProperty определяется уникальный идентификатор (ключевое поле) элемента.

<!-- WML -->
<Controls.dropdown:Button
   source="{{_source}}"
   keyProperty="id" />

Шаблон отображения элемента по умолчанию выводит значение из поля title, поэтому в источнике данных должно быть одноименное поле. Вы можете изменить имя данного поля на другое с помощью опции displayProperty.

Иерархия

Корректное отображение иерархии устанавливается с помощью опций:

  • parentProperty — название поля, которое хранит идентификатор родительской записи; значение null — запись расположена в корне иерархии;
  • nodeProperty — название поля, в котором хранится информация о типе записи (true — узел, null или false — лист).

Подробнее о различиях каждого типа записей можно прочитать в статье Типы отношений в таблицах БД.

В следующем примере показана настройка иерархии элементов:

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Button
   source="{{_source}}"
   keyProperty="key"
   parentProperty="parent"
   nodeProperty="@parent"/>

Скроллирование в выпадающем списке

При большом количестве пунктов в меню есть возможность ограничить его высоту для корректного отображения. В этом случае в меню появляется скролл.

Ограничить высоту можно, использовав опцию dropdownClassName. Опция даёт возможность установить свой класс на выпадающий список. Таким образом, если установленная высота ограничит реальную высоту меню, с учетом всех его пунктов, у выпадающего списка появится полоса прокрутки.

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Button
   source="{{_source}}"
   keyProperty="key"
   dropdownClassName="demo_menu" />
.demo_menu {
   max-height: 200px;
}

Группировка в меню

Группировка позволяет разделить пункты логически.

Для настройки группировки используют опции groupProperty и groupTemplate.

<!-- WML -->
<Controls.dropdown:Button 
   source="{{_groupTextItems}}"
   keyProperty="id"
   groupProperty="group">
   <ws:groupTemplate>
      <ws:partial template="Controls/dropdown:GroupTemplate" showText="{{true}}"/>
   </ws:groupTemplate>
</Controls.dropdown:Button>
// JavaScript
_beforeMount: function(options) {
   this._groupTextItems = new Memory({
      data: [
         { id: 1, title: 'Project', group: 'Select' },
         { id: 2, title: 'Work plan', group: 'Select' },
         { id: 3, title: 'Task', group: 'Select' },
         { id: 4, title: 'Merge request', group: 'Create' },
         { id: 5, title: 'Meeting', group: 'Create' },
         { id: 6, title: 'Video meeting', group: 'Create' }
      ],
      keyProperty: 'id'
   });
}

Скрытая группа

Кроме того, можно настроить так называемую "скрытую группу". Элементы "скрытой группы" будут выводиться в начале списка, а сама группа отображаться без заголовка. Для определения элемента в "скрытую группу" необходимо передать константу groupConstants.hiddenGroup в поле записи, где хранится идентификатор группы.

import {groupConstants} from 'Controls/list';
import {Memory} from 'Types/source';
 
this._menuSource = new Memory({
   keyProperty: 'id',
   data: [
      {
         id: '1',
         title: 'Запись 1',
         parent: null,
         menuGroupProperty: 'group1'
      },
      {
         id: '4',
         title: 'Запись 4',
         parent: '1',
         '@parent': false,
         menuGroupProperty: 'group1'
      },
      {
         id: '5',
         title: 'Запись 5',
         parent: '4',
         '@parent': false,
         menuGroupProperty: groupConstants.hiddenGroup
      },
        ...
    ]
});

Дополнительные пункты меню

Дополнительные элементы конфигурируются с помощью опции additionalProperty и дополнительного свойства additional в объекте конфигурации элементов меню. При наличии дополнительных элементов, внизу меню появляется кнопка, которая позволяет их отобразить. Клик по кнопке разворачивает меню полностью.

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Button
   keyProperty="key"
   source="{{_source}}"
   additionalProperty="additional" />
// TypeScript
protected _beforeMount(): void {
   this._source = new Memory({
      keyProperty: 'key',
      data: [
            { key: 1, title: 'Add', icon: 'icon-Bell' },
            { key: 2, title: 'Vacation', icon: 'icon-Vacation'},
            { key: 3, title: 'Time off', icon: 'icon-SelfVacation' },
            { key: 4, title: 'Hospital', icon: 'icon-Sick' },
            { key: 5, title: 'Business trip', icon: 'icon-statusDeparted' },
            { key: 6, title: 'Task', icon: 'icon-TFTask', additional: true },
            { key: 7, title: 'Incident', icon: 'icon-Alert', additional: true },
            { key: 8, title: 'Outfit', icon: 'icon-PermittedBuyers', additional: true },
            { key: 9, title: 'Project', icon: 'icon-Document', additional: true },
            { key: 10, title: 'Check', icon: 'icon-Statistics', additional: true },
            { key: 11, title: 'Meeting', icon: 'icon-Groups', additional: true },
            { key: 12, title: 'Treaties', icon: 'icon-Report', additional: true }
      ]
   });
}

Отображение истории выбора

Блок с историей выбора отображается вверху выпадающих списков. Описание стандарта можно посмотреть в разделе Меню с историей. Для отображения истории ввода в блоке автодополнения необходимо задать в опции historyId уникальный идентификатор для хранения истории ввода.

Опция задействует сервис истории ввода. При её включении активируется сохранение истории ввода в виде массива индентификаторов в сервисе истории.

При использовании источника данных SbisService необходимо на БЛ вызвать хэлпер HistoryRecentListCall, который сформирует историю. В поле будет передан фильтр с параметром _historyIds - массивом идентификаторов истории. Подробнее читайте здесь.

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Button
   source="{{_source}}"
   keyProperty="key"
   historyId="demo_history_id"/>

Шаблон отображения элемента

По умолчанию для отображения элементов выпадающего списка используется базовый шаблон Controls/dropdown:ItemTemplate.

Изменяя параметры базового шаблона можно создавать пользовательский. Для определения пользовательского шаблона отображения элемента предоставляется две опции:

  • itemTemplate — устанавливает общий шаблон для всех элементов.
  • itemTemplateProperty — устанавливает название поля записи, содержащее имя шаблона. С помощью этой настройки отдельным элементам можно задать собственный шаблон отображения.

Таким образом, выстраивается следующий порядок использования шаблонов:

  • если задано значение в itemTemplateProperty, все элементы меню, в конфигурации которых присутствует соответствующее свойство, будут отрисованы по оригинальному шаблону;
  • элементы меню, для которых не указан оригинальный шаблон, будут отрисованы по общему шаблону, указанному в itemTemplate;
  • если в itemTemplate шаблон не задан, элементы меню будут отрисованы по базовому шаблону Controls/dropdown:ItemTemplate.

В следующем примере показана настройка пользовательского шаблона отображения элемента:

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Selector
   bind:selectedKeys="_selectedKeys"
   keyProperty="id"
   displayProperty="title"
   multiSelect="{{true}}"
   source="{{_source}}">
   <ws:itemTemplate>
         <ws:partial template="Controls/dropdown:ItemTemplate" multiSelect="{{true}}">
            <ws:contentTemplate>
               <div>{{itemTemplate.itemData.item.get('title')}}</div>
            </ws:contentTemplate>
         </ws:partial>
   </ws:itemTemplate>
</Controls.dropdown:Selector>
// TypeScript
protected _beforeMount(): void {
   this._source = new Memory({
      keyProperty: 'id',
      data: [
            { id: 1, title: 'Banking and financial services, credit' },
            { id: 2, title: 'Gasoline, diesel fuel, light oil products' },
            { id: 3, title: 'Transportation, logistics, customs' },
            { id: 4, title: 'Oil and oil products' },
            { id: 5, title: 'Pipeline transportation services' },
            { id: 6, title: 'Services in tailoring and repair of clothes, textiles' },
            { id: 7, title: 'Computers and components, computing, office equipment' }
      ]
   });
}

Шаблоны, отображающиеся над/под элементами выпадающего списка

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

В опции headerTemplate задается пользовательский шаблон отображения шапки.

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Button
   keyProperty="key"
   displayProperty="title"
   caption="{[Выберите город]}"
   source="{{_source}}"
   attr:class="controlsDemo-menuButton">
   <ws:headerTemplate>
      <ws:partial template="Controls/dropdown:HeaderTemplate" caption="{[Выберите город]}" />
   </ws:headerTemplate>
</Controls.dropdown:Button>

В опции footerTemplate задается пользовательский шаблон отображения подвала.

Пример
Исходный код
<!-- WML -->
<Controls.dropdown:Button
   caption="menu"
   source="{{_menuSource}}"
   keyProperty="id"
   displayProperty="title"
   footerTemplate="wml!Controls-demo/dropdown_new/Button/FooterContentTemplate/footer" />
<!-- footer.wml -->
<div class="controlsDemo__dropdown-button__footerContentTemplate">
    <Controls.buttons:Button caption="+ Задача" viewMode="linkButton" fontColorStyle="link"/>
</div>
© 2021 Тензор. Все права защищены.