Комбо

Выпадающий список, представленный компонентом DHTMLX Combo component.

const holders = [
    { key: 1, label: 'James' },
    { key: 2, label: 'Alex' },
    { key: 3, label: 'Antony' },
    { key: 4, label: 'Andrew' }
];
            
scheduler.locale.labels.section_holder = "Holder";

scheduler.config.lightbox.sections = [
    { name:"description", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"holders", options:holders, map_to:"holders", type:"combo", 
    image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Combo box in the lightbox

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

Чтобы добавить элемент управления Combo в lightbox, выполните следующие шаги:

1. Включите файлы dhtmlxCombo:

<script src="../codebase/dhtmlxscheduler.js" ...></script>
<link rel="stylesheet" href="../codebase/dhtmlxscheduler.css" ...>

<link rel="stylesheet" href="common/dhtmlxCombo/dhtmlxcombo.css" ..>
<script src="common/dhtmlxCombo/dhtmlxcombo.js" ...></script>

2. Активируйте расширение editors на странице:

scheduler.plugins({
    editors: true
});

3. Добавьте секцию в конфигурацию lightbox:

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"holders", options:holders, map_to:"holders", type:"combo", 
    image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true},
    { name:"time", ...}
];

4. Установите метку для раздела:

scheduler.locale.labels.section_holders = "Holder";

Combo box in the lightbox

Свойства

Следующие свойства наиболее важны и обычно настраиваются для элемента управления 'combo' (полный список смотрите здесь):

name	(string) имя раздела
height	(number) высота раздела
map_to	(string) имя свойства данных, которое будет сопоставлено разделу
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) тип элемента управления раздела
options	(array of objects) определяет варианты выбора управления (для 'select', 'multiselect', 'radio', 'combo' controls). Каждый объект в массиве задаёт один вариант и имеет следующие свойства: key - (string) идентификатор варианта. Это свойство сравнивается со свойством данных события для присвоения вариантов событиям label - (string) подпись варианта
image_path	(string) путь к изображениям dhtmlxCombo
filtering	(boolean, string) включает режим автофильтрации (опции будут отфильтрованы по мере набора текста). Необязательно Значение может принимать одно из следующих значений: false - отключает фильтрацию true or "start" - включает фильтрацию, поиск начинается с начала элемента "between" - включает фильтрацию, поиск по любому вхождению набранного текста в элементах
script_path	(string) путь к серверному скрипту, который будет обеспечивать загрузку вариантов Combo с сервера. Необязательно
cache	(boolean) включает/выключает кеширование ответов скриптов (рекомендуется включать данное свойство). Необязательно

Заполнение элемента управления данными

В целом, чтобы задать значения для элемента управления Combo, следует использовать параметр options:

scheduler.config.lightbox.sections = 
    { 
        name:"holders", type:"combo", 
        ...
        options:[
            { key: 1, label: 'James' },
            { key: 2, label: 'Alex' },
            { key: 3, label: 'Antony' },
            { key: 4, label: 'Andrew' }
    ]},
    ...
];

Элементы в параметре options должны иметь 2 обязательных свойства:

• key - идентификатор варианта
• label - подпись варианта

Заполнение элемента управления данными с сервера

Чтобы заполнить элемент управления Combo данными с сервера, используйте свойство script_path, указывая путь к серверному скрипту, который будет обрабатывать запросы к серверу.

scheduler.config.lightbox.sections = [
    { name: "country", type: "combo", script_path: "data/combo_select", ... },
        ...
];

Свойство script_path задаёт URL, с которого Combo будет загружать свои варианты, то есть если script_path указан - Combo попытается загрузить данные по этому URL через AJAX.

Селектор Combo основан на dhtmlxCombo, поэтому сервер должен возвращать данные, совместимые с ним. Подробнее о способах добавления данных в Combo читайте в статье Loading Options.

URL запрашивается в двух случаях:

1. когда lightbox открывается и у Combo есть выбранное значение - управление отправляет запрос на сервер и загружает метку для выбранного варианта.

Запрос будет иметь параметр запроса id:

GET /url?id="1"

Ответ должен вернуть массив, содержащий только элемент с указанным id в следующем формате:

[
   { "value": 1, "text": "Marketing"}
]

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

Клиент отправит запрос с введённым текстом в параметре запроса mask:

GET /url?mask="al"

Ответ сервера должен вернуть все элементы, которые соответствуют значению mask:

[
   { "value": 1, "text": "Albania"},
   { "value": 3, "text": "Algeria"},
]

Пример обработчика на стороне сервера (Node.js/Express):

app.get("/api/countries", async (req, res) => {
  const { id, mask } = req.query;
  // Query your data source by id or mask
  const items = await countriesService.find({ id, mask });
  res.json(items); // [{ value: 1, text: "Albania" }, ...]
});

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

Режим автофильтрации

Режим авто-фильтрации — режим, когда опции автоматически фильтруются по мере ввода пользователя. Чтобы включить режим, установите свойство filtering в значение true:

scheduler.config.lightbox.sections = [
    { name:"holders", type:"combo", filtering:true, ... },
    ...
];

примечание

Примечание: можно использовать режим автофильтрации независимо от источника данных (клиентский или серверный).

Подробнее по теме в документации dhtmlxCombo dhtmlxCombo. Filtering.