Типы задач

информация

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

В Gantt доступны три предопределённых типа задач (вы также можете создать собственный тип):

task_types

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

Указание типа задачи в наборе данных

var data = {
    task:[
        {id:1, text:"Project #1",    type:"project",    open:true},   /*!*/
        {id:2, text:"Task #1",          start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha release", type:"milestone",   parent:1, /*!*/
            start_date:"14-04-2020"},                                                /*!*/
        {id:4, text:"Task #2",          start_date:"17-04-2020", duration:3, parent:1}],
    links:[]
};

Projects and milestones

Обычные задачи

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

type_task

Указание обычных задач

var data = {
    tasks:[{id:2, text:"Task #1", start_date:"12-04-2020", duration:3}],  /*!*/
    links:[]
};
//или
var data = {
     tasks:[{id:2, text:"Task #1", start_date:"12-04-2020", duration:3, /*!*/
            type:"task"}],  /*!*/
    links:[]
};

Projects and milestones

Задачи с type="task" обладают следующими особенностями:

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

Проектные задачи

Проектная задача охватывает период от начала самой ранней дочерней задачи до завершения самой поздней дочерней задачи.

заметка

Ключевое отличие проектной задачи от обычной - длительность проектной задачи зависит от дочерних задач и автоматически обновляется.

type_project

Указание проектных задач

var data = {
    tasks:[
        {id:1, text:"Project #1",    type:"project",    open:true}, /*!*/
        {id:2, text:"Task #1",       start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha release", type:"milestone",   parent:1,
            start_date:"14-04-2020"}],
    links:[]
};

Projects and milestones

Задачи с type="project" имеют следующие характеристики:

Могут иметь одного родителя и несколько дочерних задач.
Не перетаскиваются и не изменяют размер, если только drag and drop не включён явно через drag_project.
Зависят от дочерних задач; перемещение дочерней задачи изменяет длительность проекта.
Игнорируют свойства start_date, end_date и duration.
Не могут быть перетянуты, если не имеют дочерних задач.
Прогресс проекта (progress) по умолчанию задаётся вручную и не отражает автоматически прогресс подзадач. Для автоматического расчёта требуется пользовательский код. См. пример.

заметка

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

Вехи

Веха - это задача с нулевой длительностью, предназначенная для выделения ключевых дат проекта (подробнее).

type_milestone

Указание вех

var data = {
    tasks:[
        {id:1, text:"Project #1",    type:"project",    open:true},
        {id:2, text:"Task #1",       start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha release", type:"milestone",   parent:1, /*!*/
            start_date:"14-04-2020"}],/*!*/
    links:[]
};

Projects and milestones

Задачи с type="milestone" имеют следующие особенности:

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

заметка

Для включения создания вех см. Вехи.

Отдельная форма lightbox для каждого типа задачи

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

Включают:

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

Конфигурация по умолчанию выглядит так:

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

Если тип задачи изменяется в select-контроле, lightbox динамически обновляется в соответствии с новой конфигурацией.

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

Подробнее о настройке lightbox см. в разделе Настройка формы редактирования.

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

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

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

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

Например, чтобы добавить новый тип 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", height:20, map_to:"text", type:"textarea", focus:true},
    {name:"details", height:70, map_to: "details", type: "textarea"},
    {name:"type", type:"typeselect", map_to:"type"},
    {name:"time", height:72, type:"time", map_to:"auto"}
];
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 = function(start, end, task){
    if(task.type == gantt.config.types.meeting){
        return "meeting_task";
    }
    return "";
};

Настройте отображение текста задачи для "meeting" с помощью шаблона task_text:

gantt.templates.task_text = function(start, end, task){
    if(task.type == gantt.config.types.meeting){
        return "Meeting: <b>" + task.text + "</b>";
    }
    return task.text;
};

Custom task type

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

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

custom_look

gantt.config.type_renderers["project"]=function(task, defaultRender){
    var main_el = document.createElement("div");
    main_el.setAttribute(gantt.config.task_attribute, task.id);
    var size = gantt.getTaskPosition(task);
    main_el.innerHTML = [
        "<div className='project-left'></div>",
        "<div className='project-right'></div>"
    ].join('');
    main_el.className = "custom-project";

    main_el.style.left = size.left + "px";
    main_el.style.top = size.top + 7 + "px";
    main_el.style.width = size.width + "px";

    return main_el;
};

Classic Look

Обычные задачи​

Проектные задачи​

Вехи​

Отдельная форма lightbox для каждого типа задачи​

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

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

Обычные задачи

Проектные задачи

Вехи

Отдельная форма lightbox для каждого типа задачи

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

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