Работа с данными

Загрузка данных

Webix Gantt ожидает общий URL для загрузки и сохранения задач и ссылок:

view:"gantt", url:"remote/data"

Более подробную информацию о роутах и параметрах читайте в статье Работа с сервером.

Если у вас нет бэкенд сервера или ваш проект требует нестандартной логики, вы можете кастомизировать сервис Backend.

Структура данных

Информацию о структурах данных ресурсов, категорий и назначений, а также о том, как работать с этими сущностями на клиенте читайте здесь.

Задачи

Gantt ожидает JSON данные, где каждый элемент массива - объект со следующими полями:

• id (string) - ID задачи
• type (string) - тип элемента со следующими возможными значениями:
  • "task" (default) - задача
  • "project" - проект
  • "milestone" - веха
  • "split" - помечает задачу как разделённую, если свойство split включено.
• start_date (object | string) - начальная дата задачи
• planned_start - запланированная дата начала выполнения задачи, при условии, что включен baseline.
• end_date (object | string) - конечная дата задачи
• planned_end - запланированная дата окончания выполнения задачи, при условии, что включен baseline.
• text (string) - текст задачи (название)
• progress (number) - прогресс задачи (от 0 до 100)
• parent (number) - ID родительского проекта (0, если это корень)
• position (number) - позиция задачи в ветке
• duration (number) - продолжительность задачи в днях
• details (string) - подробности задачи
• open (boolean) - определяет, открыта ли родительская ветка.

Пример JSON

[
  {
    "text":"Project A","start_date":"2018-06-13 00:00:00",
    "duration":"1","parent":"0","progress":0.5,"open":1,
    "notes":"Weekly meeting required", "type": "project",
    "end_date":"2018-06-14 00:00:00","id":"1","planned_start": "2018-06-13 00:00:00",
        "planned_duration": 2,"planned_end": "2018-06-15 00:00:00"
  },
  // другие задачи
]

Ссылки

Gantt ожидает JSON данные, где каждый элемент массива - объект со следующими полями:

• source (number) - ID задачи-источника (откуда ссылка выходит)
• target (number) - ID целевой задачи (куда ссылка ведёт)
• type (number) - тип ссылки со следующими возможными значениями:
  • 0 - с конца к началу
  • 1 - с начала к началу
  • 2 - с конца к концу
  • 3 - с начала к концу.

Пример JSON

[
  {"source":"1.2","target":"2","type":1},
  // другие ссылки
]

Сервисы данных

У Gantt есть следующие сервисы для работы с данными:

1. Local

• хранит данные в коллекциях на клиентской стороне
• предоставляет методы для получения и перерисовки данных
• предоставляет методы для получения и перерисовки шкал

const local = $$("gantt").getService("local");
const scales = local.getScales(); // возвращает текущие шкалы

2. Operations

• предоставляет методы для добавления/удаления/обновления задач и ссылок

const ops = $$("gantt").getService("operations");
ops.addTask(obj, index, parent); // добавляет новую задачу

3. Helpers

• предоставляет методы и свойства для работы с ресурсами

const helpers = $$("gantt").getService("helpers");
// указываем темплейт для картинок ресурсов
helpers.resourceAvatar(resource, cssClass, withTooltip);

4. Grouping

• предоставляет методы для группировки при режимах задач, ресурсов и диаграммы рессурсов

5. Backend

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

const back = $$("gantt").getService("backend");
back.tasks().then((data) => console.log(data));

Операции с данными

Как получить задачи

Все задачи хранятся в TreeCollection. Коллекция доступна через метод tasks() сервиса Local.

const tasks = $$("gantt").getService("local").tasks();

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

Получаем конкретную задачу

const tasks = $$("gantt").getService("local").tasks(); 
tasks.waitData.then(function(){
   tasks.getItem(tasks.getFirstId()); // возвращаем первую задачу
});

С помощью сериализации коллекции можно получить массив всех задач:

Сериализация коллекции задач

const tasks = $$("gantt").getService("local").tasks(); 
tasks.waitData.then(function(){
   const arr = tasks.serialize();  // получаем массив задач
   /*[
        {
         "text":"Task A1","start_date":"2018-06-12 00:00:00",
         "duration":"2","progress":31,"parent":"1",
         "notes":"Contact Rob for details", "type": "task",
         "end_date":"2018-06-14 00:00:00","id":"1.1"
        },
      // ...
    ]*/
});

Как получить ссылки

Все ссылки хранятся в DataCollection. Коллекция доступна через метод links() сервиса Local.

const links = $$("gantt").getService("local").links();

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

Получаем конкретную ссылку

const links = $$("gantt").getService("local").links(); 
links.waitData.then(function(){
   links.getItem(links.getFirstId()); // возвращаем первую ссылку
});

С помощью сериализации коллекции можно получить массив всех ссылок:

Сериализация коллекции ссылок

const links = $$("gantt").getService("local").links(); 
links.waitData.then(function(){
   const arr = links.serialize(); // получаем массив ссылок
   /*[
        {"source":"1.2","target":"2","type":1},
        ...
   ]*/
});

Как получить ссылку определённого типа

Чтобы получить ссылку (входящую или выходящую), используйте метод getLinks() сервиса Local. Метод принимает 2 параметра:

• id (number, string) - ID задачи, ссылки которой вы хотите получить
• type (string) - тип ссылки, который вы хотите получить ("source" или "target").

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

const link = $$("gantt").getService("local").getLinks(1.2, "source");

Related sample:  Gantt: Data Operations

Метод возвращает объект со следующими полями:

• id (string) - ID связанной задачи
• text (string) - текст связанной задачи
• ttype (string) - тип ссылки, "source" или "target"
• type (string) - тип ссылки, "0", "1", "2" или "3".

Пример JSON

{
  id: "5", text: "Project B",
  ttype: "source", type: "1"
}

Очистка данных

Вызовите метод clearAll для очистки всех коллекций.

$$("$gantt").clearAll();

Перезагрузка данных

Чтобы очистить данные и загрузить их заново, вызовите reload.

$$("$gantt").reload();

Вы также можете перезагрузить все коллекции вручную после вызова clearAll.

Наверх