Типы задач

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

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

Чтобы назначить тип задачи, используйте свойство 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:[]
};

Related sample: Projects and milestones

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

По умолчанию dhtmlxGantt создаёт обычные задачи (tasks с 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:[]
};

Related sample: Projects and milestones

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

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

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

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

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

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

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:[]
};

Related sample: Projects and milestones

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

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

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

Вехи

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

Указание вех

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:[]
};

Related sample: 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:

Определите новый тип 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;
};

Related sample: Custom task type

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

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

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 class='project-left'></div>",
        "<div class='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;
};

Related sample: Classic Look

К началу