Контрол Выбора

Элемент выпадающего меню.

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority", height:22, map_to:"priority", type:"select", options: [         {key:1, label: "High"},                                                       {key:2, label: "Normal"},                                                     {key:3, label: "Low"}                                                      ]},                                                                          {name:"time", height:72, type:"duration", map_to:"auto"}
];
 
gantt.locale.labels.section_priority = "Priority";

Related sample:  Select control

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

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

1) Добавьте соответствующий раздел в конфигурацию лайтбокса:

var opts = [
    {key:1, label: "High"},                                            
    {key:2, label: "Normal"},                                         
    {key:3, label: "Low"}                                            
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea",focus:true},
    {name:"priority", height:22, map_to:"priority",type:"select",options:opts},                                                                           {name:"time", height:72, type:"duration", map_to:"auto"}
];

2) Назначьте метку для раздела:

gantt.locale.labels.section_priority = "Priority";

Related sample:  Select control

Свойства

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

• name - (string) определяет имя раздела
• height - (number) устанавливает высоту раздела
• map_to - (string) указывает свойство данных, связанное с разделом
• type - (string) определяет тип контрола раздела
• focus - (boolean) если true, раздел получает фокус при открытии лайтбокса
• options - (array) массив объектов, определяющих варианты выбора для контрола (используется для select, checkbox и radio контролов). Каждый объект включает:
  • key - (string) уникальный идентификатор опции, сопоставленный со свойствами данных задачи
  • label - (string) текст, отображаемый для опции
• default_value - (any) устанавливает значение по умолчанию для контрола, если входное значение не определено
• onchange - (function) определяет функцию обработчика события 'onChange' для контрола

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

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

gantt.config.lightbox.sections = [
    { name:"priority",height:22, map_to:"priority",type:"select",
      options: [ 
        {key:1, label: "High"},                                               
        {key:2, label: "Normal"},                                             
        {key:3, label: "Low"}                                                
    ]}                                                                    
];

Элементы в параметре options должны иметь два основных свойства:

• key - уникальный идентификатор опции
• label - текст отображения для опции

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

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

gantt.config.lightbox.sections = [
    {name:"description", ...},
    { name:"priority",map_to:"priority",type:"select",
        options:gantt.serverList("priority")},     {name:"category", map_to:"category", type:"select", 
        options:gantt.serverList("category")},     {name:"time", ...}
];
gantt.init("gantt_here");
gantt.load("/data");

Ответ сервера с URL /data выглядит следующим образом:

{
  "tasks":[
    {"id":1,"text":"Project #2","start_date":"01-04-2020","duration":18,"parent":0},
    {"id":2,"text":"Task #1","start_date":"02-04-2020","duration":8,"parent":1},
    {"id":3,"text":"Task #2","start_date":"11-04-2020","duration":8,"parent":1}
  ],
  "links":[
    {"id":1,"source":1,"target":2,"type":"1"},
    {"id":2,"source":2,"target":3,"type":"0"}
  ],
  "collections": {     "priority":[
        {"value":"1","label":"Low"},
        {"value":"2","label":"Medium"},
        {"value":"3","label":"High"}
    ],
    "category":[
        {"value":"1","label":"Simple"},
        {"value":"2","label":"Complex"},
        {"value":"3","label":"Unknown"}
    ]
  }
}

Загрузка опций через dhtmlxConnector

Вот пример инициализации dhtmlxConnector:

//data.php
<?php
    include('connector-php/codebase/gantt_connector.php');
 
    $res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
 
    $list = new OptionsConnector($res);
    $list->render_table("priorities","id","id(value),name(label)");
 
    $gantt = new JSONGanttConnector($res);
    $gantt->set_options("priority", $list);
    $gantt->render_links("gantt_links","id","source_task(source),
                    target_task(target),type");    
    $gantt->render_table("gantt_tasks","id","start_date,duration,text,progress,
                    sortorder,parent");
?>

К началу