Combo

В этом разделе рассматривается комбобокс, предоставляемый компонентом DHTMLX Combo.

var 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 в lightbox, выполните следующие шаги:

Подключите файлы 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>

Включите расширение editors на странице:

scheduler.plugins({
    editors: true
});

Добавьте секцию в конфигурацию 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", ...}
];

Задайте метку для секции:

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

Свойства

Ниже приведены основные и часто используемые свойства для контрола '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'). Каждый объект в массиве описывает одну опцию и содержит следующие свойства: key - (string) id опции. Это значение сравнивается со свойством данных события для назначения опций событиям label - (string) текст метки опции
image_path	(string) путь к изображениям dhtmlxCombo
filtering	(boolean, string) включает поддержку автофильтрации (опции фильтруются по мере ввода текста). Необязательный параметр. Параметр может принимать следующие значения: false - отключает фильтрацию true или "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 должен содержать два обязательных свойства:

key — id опции
label — текст метки опции

Заполнение контрола данными с сервера

Чтобы загрузить опции Combo с сервера, используйте свойство script_path для указания URL серверного скрипта, обрабатывающего запросы.

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

Свойство script_path определяет URL, с которого combo загружает свои опции через AJAX.

Так как селектор combo основан на dhtmlxCombo, сервер должен возвращать данные в совместимом формате. Подробнее о добавлении данных в combo можно узнать в статье Loading Options.

Запросы выполняются в двух случаях:

1) Когда открывается lightbox и в combo выбрано значение, контрол отправляет запрос для загрузки метки для этой опции.

В запросе передаётся параметр id:

GET /url?id=1

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

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

2) Когда пользователь начинает вводить текст в поле combo, контрол загружает отфильтрованные опции.

В запросе передаётся введённый текст в параметре mask:

GET /url?mask=al

Сервер должен вернуть все элементы, соответствующие маске:

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

Если вы используете библиотеку PHP Connector, серверная часть может выглядеть так:

<?php
    require_once('../../connector-php/codebase/combo_connector.php');
    require_once("../common/config.php");
 
    $combo = new ComboConnector($res, $dbtype);
 
    $combo->event->attach("beforeFilter", "by_id");
    function by_id($filter) {
        if (isset($_GET['id']))
            $filter->add("item_id", $_GET['id'], '=');
    }   
 
    $combo->dynamic_loading(3);
    $combo->render_table("Countries","item_id","item_nm");
 
?>

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

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

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

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

Для получения дополнительной информации смотрите документацию dhtmlxCombo по фильтрации.

Наверх