Multiselect

Этот контрол предоставляет группу чекбоксов.

Убедитесь, что вы включили расширение multiselect, чтобы использовать этот контрол в lightbox.

scheduler.plugins({
    multiselect: true });
 
scheduler.locale.labels.section_userselect = "Участники";
 
scheduler.config.lightbox.sections=[    
    { name:"description", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("users"), vertical:"false" },
    { name:"time", height:72, type:"time", map_to:"auto"}   
];

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

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

Включите расширение 'multiselect' на вашей странице:

scheduler.plugins({
    multiselect: true
});

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

scheduler.config.lightbox.sections = 
    { name:"description", ... },
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("user_id"), vertical:false },
    { name:"time", ...}
];

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

scheduler.locale.labels.section_userselect = "Участники";

Свойства

Ниже приведены основные свойства, которые часто используются с контролом 'multiselect' (полный список смотрите здесь):

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) отображаемое название опции
script_url	(string) URL серверного скрипта, который динамически загружает варианты multiselect. Необязательный параметр, используется только в динамическом режиме.
vertical	(boolean) определяет, будут ли кнопки multiselect располагаться вертикально (true) или горизонтально (для контролов 'multiselect' и 'radio')
delimiter	(string) определяет разделитель, используемый для разделения значений multiselect. Если не указан, применяется глобальная настройка section_delimiter.

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

Обычно значения для кнопок multiselect задаются через параметр options:

scheduler.config.lightbox.sections = 
    {   name:"userselect", type:"multiselect", 
        ...
        options:[
            { key: 1, label: 'George' },
            { key: 2, label: 'Nataly' },
            { key: 3, label: 'Diana' },
            { key: 4, label: 'Adam' }
    ]},
    ...
];

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

key — уникальный идентификатор опции
label — текстовая метка, отображаемая для опции

Заполнение чекбоксов с сервера

Чтобы получить значения чекбоксов с сервера, используйте метод serverList:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("users"), vertical:"false" },
    {name:"time", ...}
];
 
scheduler.load("api/data");

Здесь api/data — это серверный скрипт, который возвращает как события, так и варианты для кнопок multiselect, в формате, описанном в Примеры форматов данных:

//response
{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 00:00:00",
          "end_date":"2019-03-04 00:00:00",
          "text":"dblclick me!",
          "user_id":"1,2"
      },
      {
          "id":"2",
          "start_date":"2019-03-09 00:00:00",
          "end_date":"2019-03-11 00:00:00",
          "text":"and me!",
          "user_id":"2,3"
      }
   ], 
   "collections": {                         
      "users":[                          
         {"value":"1","label":"Lisa"},    
         {"value":"2","label":"Bob"},   
         {"value":"3","label":"Mike"}    
      ]                                     
   }                                        
}

Можно динамически обновлять список вариантов с помощью метода updateCollection.

var oldOptions = scheduler.serverList("users").slice();
scheduler.updateCollection("users", [
         {"value":"4","label":"John"},    
         {"value":"5","label":"Paul"},   
         {"value":"6","label":"Ringo"},   
         {"value":"7","label":"George"}
]);

Динамическая загрузка

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

В динамическом режиме опции загружаются только по мере необходимости. Это уменьшает количество запросов, но ограничивает возможность реализации пользовательской логики.

На серверной стороне у вас должен быть код, аналогичный следующему.

Чтобы включить динамический режим, добавьте свойство script_url вместе с options:

scheduler.config.lightbox.sections = [
    {name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("user_id"),
    script_url:'api/options'},
    ...
];

Эндпоинт api/options должен возвращать JSON-данные следующего вида:

[                          
    {"value":"1","label":"Lisa"},    
    {"value":"2","label":"Bob"},   
    {"value":"3","label":"Mike"}    
]

Наверх