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"}
];

Related sample:  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";

Related sample:  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) функция-обработчик события, вызывается при изменении значения элемента управления Related sample:  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");

Ответ сервера для метода 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"}      ]   }}

Related sample:  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.

Наверх