Radio

Группа радиокнопок

примечание

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

scheduler.plugins({
    editors: true /*!*/
});

var priorities = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Medium' },
    { key: 3, label: 'Low' }
];
            
scheduler.locale.labels.section_priority = 'Priority';

scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"priority", height:58, options:priorities, 
                map_to:"priority", type:"radio", vertical:true},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Radio button in the lightbox

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

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

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

scheduler.plugins({
    editors: true
});

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

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"radiobutton", height:58, options:priorities, 
    map_to:"priority", type:"radio", vertical:true},
    { name:"time", ...}
];

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

scheduler.locale.labels.section_priority = 'Priority';

Radio button in the lightbox

Свойства

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

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) отображаемая подпись опции
vertical	(boolean) определяет, будут ли радиокнопки располагаться вертикально (true) или горизонтально (применимо к элементам 'multiselect' и 'radio')

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

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

scheduler.config.lightbox.sections = 
    {      name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'High' },
            { key: 2, label: 'Medium' },
            { key: 3, label: 'Low' }
    ]},
    ...
];

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

• key - ID опции
• label - отображаемый текст опции

Получение значений радиокнопок с сервера

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

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

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

Ответ сервера для метода 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",
          "priority":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":"Low"},/*!*/
         {"value":2,"label":"Medium"},/*!*/
         {"value":3,"label":"High"}/*!*/
      ]/*!*/
   }/*!*/
}

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

//types.php
<?php
    require_once('../../../../connector-php/codebase/scheduler_connector.php');
    include ('../../common/config.php');

    $list = new JSONOptionsConnector($res, $dbtype);
    $list->render_table("types","typeid","typeid(value),name(label)");
    
    $scheduler = new JSONSchedulerConnector($res, $dbtype);
    $scheduler->set_options("type", $list);
    $scheduler->render_table(
        "tevents",
        "event_id",
        "start_date,end_date,event_name,type"
    );
?>

примечание

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

Обработка событий для элемента Radio

API dhtmlxScheduler не предоставляет встроенных обработчиков событий специально для радиокнопок в lightbox Scheduler.

Однако вы можете добавить обработчик клика для радиокнопок в Lightbox следующим образом:

1. Получите элементы radio после открытия lightbox.

scheduler.attachEvent("onLightbox", function(){
    var node = scheduler.formSection("type").node;
    var radios = node.getElementsByTagName("input");
    ...
});

2. Добавьте событие onclick для каждой радиокнопки в Lightbox.

scheduler.attachEvent("onLightbox", function(){
    ...
    for(var i = 0; i < radios.length; i++){
      radios[i].onclick = onRadioClick; 
    }
});

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

function onRadioClick(event){
    var e = event || window.event,
        node = this;
  
    dhtmlx.message(node.value);
}

Related sample Обработка событий для элемента Radio