Select

var alert_opts = [
    { key: 1, label: 'None' },
    { key: 2, label: 'On start date' },
    { key: 3, label: '1 day before' }
];
            
scheduler.locale.labels.section_select = 'Alert';

scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"select", height:40, map_to:"type", type:"select", options:alert_opts},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Basic select editor in the lightbox

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

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

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

scheduler.config.lightbox.sections = 
    { name:"description", ... },
    { name:"alert", height:40,map_to:"type",type:"select", options:alert_opts},
    { name:"time", ...}
];

2. Задайте подпись для секции:

scheduler.locale.labels.section_select = "Alert";

Basic select editor in the lightbox

Свойства

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

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) идентификатор варианта, сопоставляется с соответствующим свойством данных события label - (string) отображаемая подпись варианта
onchange	(function) функция-обработчик события, вызывается при изменении значения элемента управления Linking select controls in the lightbox

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

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

scheduler.config.lightbox.sections = 
    {      name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'None'},
            { key: 2, label: 'On start date'},
            { key: 3, label: '1 day before'}
    ]},
    ...
];

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

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

Динамическое изменение вариантов

Чтобы загрузить варианты с сервера, присвойте свойству options значение, возвращаемое методом serverList:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"type",map_to:"type",type:"select",options:scheduler.serverList("type")},
    {name:"time", ...}
];

scheduler.load("./data/types");

примечание

Подробнее о методе serverList можно узнать в соответствующей статье.

Ответ сервера для метода load должен содержать коллекцию с именем, соответствующим названию server list, в формате JSON пример:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "text":"Interview",
          "type":"1"
      },
      {
          "id":"2",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Performance review",
          "type":"2"
      }
   ], 
   "collections": {/*!*/
      "type":[/*!*/      
         {"value":"1","label":"Interview"},/*!*/
         {"value":"2","label":"Performance review"},/*!*/
         {"value":"3","label":"Request"}/*!*/
      ]/*!*/
   }/*!*/
}

Populating a select editor from the server

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

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

scheduler.updateCollection("type", [      
    {"key":"1","label":"Interview"},
    {"key":"2","label":"Performance review"},
    {"key":"3","label":"Request"}
]);

Более подробную информацию см. в статье scheduler.serverList.