Настройка элементов лайтбокса

Лайтбокс — это форма редактирования, используемая для изменения сведений о задаче.

По умолчанию лайтбокс отображается на изображении ниже.

Конфигурация лайтбокса может различаться в зависимости от типа задачи. Настройки для каждого типа сохраняются в объекте lightbox:

• gantt.config.lightbox.sections - для обычных задач.
• gantt.config.lightbox.project_sections - для задач проекта.
• gantt.config.lightbox.milestone_sections - для вех.

Вы также можете добавить пользовательский тип и определить структуру лайтбокса для него. Для деталей смотрите Типы задач.

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

• sections? - (LightboxSection[]) - опционально, массив разделов лайтбокса для обычных задач
• project_sections? - (LightboxSection[]) - опционально, массив разделов лайтбокса для задач проекта
• milestone_sections? - (LightboxSection[]) - опционально, массив разделов лайтбокса для вех
• [lightboxType: string] - (LightboxSection[] | undefined) - массив разделов лайтбокса для настраиваемого типа

заметка

С версии 7.1.13, если либо gantt.config.csp установлен в значение true, либо Gantt работает в окружении Salesforce, лайтбокс будет отрисован внутри контейнера Gantt.

Структура лайтбокса

Разделы

Структура лайтбокса задаётся свойством sections объекта лайтбокса:

// дефиниция базового лайтбокса
gantt.config.lightbox.sections = [
    { name: 'description', height: 70, map_to: 'text', type: 'textarea', focus: true },
    { name: 'time', height: 72, map_to: 'auto', type: 'duration' }
];

Каждый элемент в массиве sections является объектом, который определяет один раздел в лайтбоксе. См. конфигурацию лайтбокса для доступных свойств раздела.

Элементы управления секциями

Каждый раздел лайтбокса основан на некотором элементе управления. Следующие типы элементов управления доступны для использования в лайтбоксе:

• Textarea - многострочное текстовое поле
• Time - пара селекторов для задания продолжительности задачи путем указания даты начала и окончания
• Duration - набор селекторов для задания продолжительности задачи путем указания даты начала задачи и количества дней
• Select - простое выпадающее меню
• Typeselect - выпадающий список для изменения типа задачи
• Parent - выпадающее меню для изменения родителя задачи
• Template - контейнер с некоторым HTML-содержимым внутри
• Checkbox - флажок для включения одной или нескольких опций
• Radio button - радиокнопка для выбора только одного варианта из заданного набора
• Resources - сложный контрол для назначения нескольким ресурсам задачи
• Resource Assignments - расширенный контрол для назначения ресурсов задаче
• Constraint - сложный контрол для задания ограничений задачи
• Baselines - сложный контрол для задания базовых линий задачи

const 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, map_to: 'auto', type: 'duration' }
];