Типы Задач

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

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

  1. Обычная задача (по умолчанию).
  2. Проектная задача.
  3. Контрольная точка.

Чтобы определить тип задачи, вы можете использовать свойство 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 создает обычные задачи (задачи с 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_project.
  • Они зависят от дочерних задач, поэтому изменения во времени дочерней задачи изменят продолжительность проектной задачи.
  • Они игнорируют свойства start_date, end_date и duration.
  • Их нельзя перетаскивать, если у них нет дочерних задач.
  • По умолчанию, прогресс проекта устанавливается вручную и не зависит от подзадач. Для автоматического расчета прогресса требуется дополнительное кодирование. Проверьте примеры.

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

Контрольные точки

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

Указание контрольных точек

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.

Доступные конфигурации:

  • 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"}
];

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

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

Для получения дополнительной информации о конфигурации lightbox обратитесь к главе Настройка формы редактирования.

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

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

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

Например, если вы хотите создать новый тип задачи под названием meeting, который является обычной задачей с уникальным цветом и пользовательскими элементами ввода lightbox:

Чтобы определить тип meeting и настроить его lightbox, выполните следующие шаги:

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

    gantt.config.types.meeting = "type_id";
    Здесь "meeting" — это программное имя типа, используемое для удобочитаемости. "type_id" — это уникальный идентификатор типа, хранящийся в базе данных.

  2. Установите метку для нового типа в контроле "typeselect":

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

  3. Определите новую структуру lightbox для типа **meeting**:

    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";

  4. Определите стиль для нового типа и примените его, используя шаблон 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 "";
    };

  5. Установите пользовательский текстовый шаблон для задач **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

К началу