Перейти к основному содержимому

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

Первичная загрузка данных​

При настройке Kanban вы можете передать начальные данные для колонок, карт, строк и связей.

const columns = [ // данные для колонок
    {
        label: "Backlog",
        id: "backlog"
    },
    {
        label: "In progress",
        id: "inprogress"
    },
    {
        label: "Testing",
        id: "testing"
    },
    {...}
];

const cards = [ // данные для карт
    {
        id: 1,
        label: "Integration with React",
        priority: 1,
        color: "#65D3B3",
        description: "Some description...",

        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),

        progress: 25,
        users: [1,2,3,4],
        sprint: "1.0",
        column: "backlog",
        type: "feature",
        css: "red",
        votes: [4,6,9],
        comments: [
            {
                id: 1,
                userId: 9,
                cardId: 6,
                text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.",
                date: new Date(),
            },{...}
        ]
    },
    {
        id: 2,
        label: "Archive the cards/boards ",
        priority: 2,
        color: "#FFC975",

        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),

        sprint: "1.0",
        column: "backlog",
        type: "feature"
    },
    {
        label: "Searching and filtering",
        priority: 1,
        color: "#65D3B3",

        start_date: new Date("01/05/2021"),

        sprint: "1.2",
        column: "backlog",
        type: "task"
    },
    {
        label: "Set the tasks priorities",
        priority: 2,
        color: "#58C3FE",

        sprint: "1.2",
        column: "inprogress",
        type: "feature"
    },
    {...}
];

const rows = [ // данные для строк
    {
        label: "Feature",
        id: "feature"
    },
    {
        label: "Task",
        id: "task",
        collapsed: true
    },
    {...}
];

const links = [
    {
        id: "link_1",
        masterId: 1,
        slaveId: 2,
        relation: "relatesTo",
    },
    {...}
];

// инициализация Kanban с начальными данными для колонок, карт и строк
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

Загрузка данных из локального источника​

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

const board = new kanban.Kanban("#root", {});

// загрузка данных в Kanban
board.parse({ columns, cards, rows });

Синхронизация данных Kanban с Gantt и Scheduler​

Ниже приведён пример синхронизации данных Kanban с другими виджетами DHTMLX, такими как Gantt и Scheduler:

Получение данных Kanban​

Существует несколько методов для доступа к данным Kanban:

  • getAreaCards() - возвращает массив с объектами данных для всех карт в определённой колонке (и строке)
  • getCard() - возвращает объект данных карты по её ID
  • serialize() - сериализует данные Kanban в JSON

Получение состояния Kanban​

Для доступа к состоянию Kanban можно воспользоваться следующими методами:

  • api.getReactiveState() - возвращает объект с реактивными свойствами из StateStore
  • api.getState() - получает объект с текущими свойствами из StateStore
  • api.getStores() - предоставляет объект с StateStore и DataStore

Экспорт данных Kanban​

Для экспорта данных Kanban используйте:

  • export.json() - экспортирует данные Kanban в виде JSON-файла

Добавление новых элементов​

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

  • addCard() - создаёт новую карту в Kanban
  • addColumn() - создаёт новую колонку в Kanban
  • addRow() - создаёт новую строку в Kanban

Обновление элементов​

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

  • updateCard() - обновляет данные карты по её ID
  • updateColumn() - обновляет данные колонки по её ID
  • updateRow() - обновляет данные строки по её ID

Удаление элементов​

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

  • deleteCard() - удаляет карту из Kanban по её ID
  • deleteColumn() - удаляет колонку из Kanban по её ID
  • deleteRow() - удаляет строку из Kanban по её ID

Перемещение элементов​

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

  • moveCard() - перемещает карту в определённую колонку и строку
  • moveColumn() - перемещает колонку в выбранную позицию
  • moveRow() - перемещает строку в выбранную позицию

Пример​

Ниже приведён пример использования Kanban API для управления данными: