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

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

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) - начальная дата задачи
  • end_date (object) - конечная дата задачи
  • text (string) - текст задачи (название)
  • progress (number) - прогресс задачи (от 0 до 100)
  • parent (number) - ID родительского проекта (0, если это корень)
  • position (number) - позиция задачи в ветке
  • duration (number) - продолжительность задачи в днях
  • details (string) - подробности задачи
  • opened (boolean) - определяет, открыта ли родительская ветка.

Пример JSON

[
  {
    "text":"Project A","start_date":"2018-06-13 00:00:00",
    "duration":"1","parent":"0","progress":0.5,"open":true,
    "end_date":"2018-06-14 00:00:00","id":"1"
  },
  // другие задачи
]

Ссылки

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

Смотрите папку models исходного кода, чтобы познакомиться с сигнатурами методов.

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

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

Все задачи хранятся в 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"
}
Наверх