Available only in PRO Edition

Разделение Задач

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

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

У вас также есть возможность отображать их в виде одной строки, представляющей одну задачу:

Чтобы отобразить проект как разделённую задачу, измените свойство render на split:

{id: 1, text: "Task #2", start_date: "03-04-2018 00:00", type: "project", 
    render:"split", parent: 0},  {id: 2, text: "Task #2.1", start_date: "03-04-2018 00:00", duration: 1, 
    parent: 1},
{id: 3, text: "Task #2.2", start_date: "05-04-2018 00:00", duration: 2, 
    parent: 1},
{id: 4, text: "Task #2.3", start_date: "08-04-2018 00:00", duration: 1, 
    parent: 1}

В этом примере "Task#2" разделена на "Task#2.1", "Task#2.2" и "Task#2.3", которые остаются полностью интерактивными.

Related sample:  Split task

Если вы предпочитаете отображать разделённую задачу в её обычной древовидной структуре (как проект с подзадачами), просто измените свойство task.render и обновите диаграмму Ганта:

// перерисовка задачи в режиме 'split'
task.render = "split";
gantt.render();
 
// перерисовка задачи в обычном (древовидном) режиме
task.render = "";
gantt.render();

Например, вы можете добавить элемент управления, связанный со свойством task.render в лайтбокс, позволяющий переключаться между разделённым и иерархическим представлениями. Пример приведён в разделе ниже.

Динамическое переключение режима разделения

Вы можете настроить лайтбокс для включения переключения режима разделения задачи. Это включает добавление нового раздела с флажком в лайтбокс, обновив настройки конфигурации для задач типа проект - gantt.config.lightbox.project_sections и добавив метку для нового раздела:

gantt.locale.labels.section_split = "Отображение";
gantt.config.lightbox.project_sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "split", type:"checkbox", map_to: "render", options:[
        {key:"split", label:"Разделить задачу"}
    ]},
    {name: "time", type: "duration", readonly: true, map_to: "auto"}
];

Это приведёт к следующему интерфейсу:

Когда флажок снят, разделённая задача будет отображаться как проект с подзадачами.

Related sample:  Split task

Проверка, является ли задача разделённой

Чтобы определить, является ли задача разделённой, вы можете использовать метод isSplitTask. Этот метод принимает объект задачи в качестве входных данных и возвращает true, если задача разделена.

var task = gantt.getTask(1);
if(gantt.isSplitTask(task)){
  ...
}

Разворачивание/сворачивание разделённых задач

Если вы хотите развернуть или свернуть разделённую задачу прямо из грида, существует опция конфигурации для этого. Она называется open_split_tasks и принимает логическое значение для включения или отключения возможности разворачивания разделённых задач.

gantt.config.open_split_tasks = true;

Фильтрация разделённых задач

Чтобы отфильтровать подзадачи разделённой задачи на диаграмме Ганта, используйте событие onBeforeSplitTaskDisplay и укажите:

• true для подзадач, которые вы хотите отобразить
• false для подзадач, которые вы хотите скрыть

gantt.attachEvent("onBeforeSplitTaskDisplay", function (id, task, parent) {
    if (task.duration < 3) {
        return false;
    }
    return true;
});

Стилизация

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

Когда разделённые задачи свёрнуты в одну строку, светло-зелёная полоса родительского элемента остаётся видимой на той же позиции, но с изменённой непрозрачностью и значением z-index.

Related sample:  Expand and collapse split tasks

Вы можете настроить цвет полосы родительского элемента, как и других полос временной шкалы timeline или полностью скрыть её с помощью CSS:

.gantt_task_line.gantt_split_parent {
    display: none;
}

Если существует только одна разделённая задача, сводный элемент (type="project") становится невидимым, так как он полностью перекрыт разделённой задачей. Если отсутствуют разделённые подзадачи, сводный элемент будет иметь стандартные даты и продолжительность.

Стилизация отдельных разделённых задач

Начиная с версии v8.0, разделённые задачи включают свойство task.$rendered_at в шаблонные функции. Это свойство содержит ID строки, где отображается разделённая задача. Используя шаблон task_class, вы можете стилизовать конкретные разделённые задачи в зависимости от их отображаемой строки.

gantt.templates.task_class = function(start, end, task) {
    if(task.$rendered_at) {
        if(gantt.calculateTaskLevel(gantt.getTask(task.$rendered_at)) === 1) {
            return "phase-level-split-task";
        }
    }
    return "";
};

К началу