Типы задач

информация

Эта функциональность доступна только в версии PRO.

Существует 3 заранее определённых типа задач, которые можно представить в диаграмме Гantt (вы также можете добавить свой собственный тип):

task_types

Чтобы задать тип задачи, используйте свойство type элемента данных (значения хранятся в объекте types:)

Specifying the type of a task in the data set
const data = {
    tasks: [
        { id: 1, text: "Project #1", type: "project", open: true },
        { id: 2, text: "Task #1", start_date: "12-04-2025", duration: 3, parent: 1 },
        { id: 3, text: "Alpha release", start_date: "16-04-2025", type: "milestone", parent: 1 },
        { id: 4, text: "Task #2", start_date: "17-04-2025", duration: 3, parent: 1 },
    ],
    links: [
        { id: 1, source: "1", target: "2", type: "1" },
        { id: 2, source: "2", target: "3", type: "0" },
        { id: 3, source: "3", target: "4", type: "0" },
    ],
};

Связанный пример: Проекты и вехи

Регулярные задачи

По умолчанию dhtmlxGantt обеспечивает создание обычных задач (задач с type="task").

type_task

Specifying regular tasks
const data = { 
    tasks: [
        { id: 2, text: "Task #1", start_date: "12-04-2025", duration: 3, parent: 1 }, 
    ],
    links: [],
};
 //or
const data = {
    tasks: [
        { id: 2, text: "Task #1", start_date: "12-04-2025", duration: 3, parent: 1, type: "task" }, 
    ],
    links: [],
};

Связанный пример: Проекты и вехи

Задачи с type="task" можно охарактеризовать следующим образом:

Может иметь 1 родителя и любое количество дочерних задач.
Можно перетаскивать и изменять размер.
Не зависят от дочерних задач, т.е. если пользователь перетаскивает дочернюю задачу обычной задачи, сама задача не изменяет свою длительность или прогресс соответственно.
Может появляться на родительских проектах. См. детали.
Может быть скрыта на таймлайне. См. детали.

Задачи проекта

Задача проекта — это задача, которая начинается, когда начинается её самая ранняя дочерняя задача, и заканчивается, когда заканчивается её самая поздняя дочерняя задача.

заметка

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

type_project

Specifying project tasks
const data = {
    tasks: [
        { id: 1, text: "Project #1", type: "project", open: true }, 
        { id: 2, text: "Task #1", start_date: "12-04-2025", duration: 3, parent: 1 },
        { id: 3, text: "Alpha release", start_date: "16-04-2025", type: "milestone", parent: 1 },
        { id: 4, text: "Task #2", start_date: "17-04-2025", duration: 3, parent: 1 },
    ],
    links: [],
};

Связанный пример: Проекты и вехи

Задачи с type="project" можно охарактеризовать следующим образом:

Может иметь 1 родителя и любое количество дочерних задач.
Не может быть перетаскиваема и изменяема по размеру, если явно не включено перетаскивание через конфигурацию drag_project.
Зависит от дочерних задач, т.е. если пользователь перетаскивает дочернюю задачу задач проекта, длительность этой задачи изменяется.
Игнорируются свойства start_date, end_date, duration.
Не может быть перетащена, если у неё нет дочерних задач.
Прогресс проекта задаётся явно и по умолчанию не зависит от подзадач. Если хотите, чтобы он считывался автоматически — нужно написать код. См. примеры.

заметка

Чтобы обеспечить возможность добавления задач проекта, прочитайте статью Milestone. Возможность добавлять вехи гарантирует, что ваши конечные пользователи смогут добавлять задачи проекта.

Вехи

Milestone — задача нулевой продолжительности, которая используется для отметки важных дат проекта (подробнее).

type_milestone

Specifying milestones
const data = {
    tasks: [
        { id: 3, text: "Alpha release", start_date: "16-04-2025", type: "milestone", parent: 1 }, 
    ],
    links: [],
};

Связанный пример: Проекты и вехи

Задачи с type="milestone" можно охарактеризовать следующим образом:

Может иметь 1 родителя и любое количество дочерних задач.
Не может быть перетаскнута и изменяема.
Имеют нулевую продолжительность и сохраняют её всё время.
Игнорируются свойства end_date, duration, progress.
Может появляться на родительских проектах. См. детали.
Может быть скрыта на таймлайне. См. детали.

заметка

Чтобы обеспечить возможность добавления вех, прочитайте статью Milestone.

Специфический lightbox для каждого типа задачи

Каждый тип задачи имеет свой набор характеристик. Поэтому для каждого типа можно определить индивидуальную конфигурацию формы деталей (lightbox). Все конфигурации хранятся в объекте lightbox.

Они:

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

Настройки конфигурации по умолчанию следующие:

gantt.config.lightbox.sections = [
    { name: "description", type: "textarea", map_to: "text", height: 70, focus: true },
    { name: "time", type: "duration", map_to: "auto" }
];

gantt.config.lightbox.project_sections = [
    { name: "description", type: "textarea", map_to: "text", height: 70, focus: true },
    { name: "type", type: "typeselect", map_to: "type" },
    { name: "time", type: "duration", map_to: "auto", readonly: true }
];

gantt.config.lightbox.milestone_sections = [
    { name: "description", type: "textarea", map_to: "text", height: 70, focus: true },
    { name: "type", type: "typeselect", map_to: "type" },
    { name: "time", type: "duration", map_to: "auto", single_date: true }
];

Когда пользователь изменяет тип задачи в соответствующем выпадающем списке, соответствующая конфигурация применяется к открывающемуся lightbox и он обновляется динамически.

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

Чтобы углубиться в детали конфигурации lightbox, можно прочитать раздел Configuring Edit Form.

Создание пользовательского типа

Все типы задач определяются в объекте types.

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

Добавить новое значение в объект types.
Определить индивидуальные настройки для нового типа.

Предположим, вы хотите добавить новый тип задач — meeting. Meeting будет обычной задачей, но окрашен в другой цвет и будет иметь другие поля в lightbox.

custom_task_type

Чтобы определить новый тип с именем meeting и задать для него индивидуальный lightbox, используйте следующую технику:

Добавьте новый тип в объект types:

gantt.config.types.meeting = "type_id";

где "meeting" — программируемое имя типа. Оно ничего не влияет на функциональность. Единственная цель программируемого имени типа — сделать работу с типами более читаемой. "type_id" — идентификатор типа, который будет храниться в базе данных. Идентификатор типа должен быть уникальным внутри объекта types.

Задайте метку нового типа в элементе управления "typeselect":

gantt.locale.labels.type_meeting = "Meeting";

Укажите новую структуру lightbox для вновь созданного типа:

gantt.config.lightbox.meeting_sections = [
    { name: "title", type: "textarea", map_to: "text", height: 20, focus: true },
    { name: "details", type: "textarea", map_to: "details", height: 70 },
    { name: "type", type: "typeselect", map_to: "type" },
    { name: "time", type: "time", map_to: "auto", height: 72 }
];

gantt.locale.labels.section_title = "Subject";
gantt.locale.labels.section_details = "Details";

Укажите стиль для нового типа и примените его с помощью шаблона task_class:

.meeting_task{
    border:2px solid #BFC518;
    color:#6ba8e3;
    background: #F2F67E;
}

.meeting_task .gantt_task_progress{
    background:#D9DF29;
}

gantt.templates.task_class = (start, end, task) => {
    return task.type === gantt.config.types.meeting 
        ? "meeting_task" 
        : "";
};

Установите шаблон для текста задач типа "meeting" с использованием шаблона task_text:

gantt.templates.task_text = (start, end, task) =>
    task.type === gantt.config.types.meeting
        ? `Meeting: <b>${task.text}</b>`
        : task.text;

Связанный пример: Custom task type

Пользовательское отображение типов задач

Чтобы настроить внешний вид существующих типов задач, используйте опцию type_renderers. Эта опция позволяет переопределять функции, отвечающие за отображение разных типов задач на странице.

custom_look

gantt.config.type_renderers["project"] = (task, defaultRender) => {
    const taskBar = document.createElement("div");
    taskBar.setAttribute(gantt.config.task_attribute, task.id);
    taskBar.className = "custom-project";

    const taskSize = gantt.getTaskPosition(task);
    taskBar.innerHTML = [
        "<div className='project-left'></div>",
        "<div className='project-right'></div>"
    ].join('');

    taskBar.style.left = `${taskSize.left}px`;
    taskBar.style.top = `${taskSize.top + 7}px`;
    taskBar.style.width = `${taskSize.width}px`;

    return taskBar;
};

Связанный пример: Classic Look

Need help?

Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.

Регулярные задачи​

Задачи проекта​

Вехи​

Специфический lightbox для каждого типа задачи​

Создание пользовательского типа​

Пользовательское отображение типов задач​

Регулярные задачи

Задачи проекта

Вехи

Специфический lightbox для каждого типа задачи

Создание пользовательского типа

Пользовательское отображение типов задач