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

Это руководство охватывает операции с данными в Kanban: загрузку начальных данных, чтение и экспорт данных, изменение cards, columns, rows и links, а также управление комментариями и выделением.

Загрузка начальных данных

При инициализации Kanban передайте начальные данные через свойства columns, cards, rows и links.

Следующий пример кода передаёт данные columns, cards, rows и links в конструктор Kanban:

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

const cards = [ // данные для 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 = [ // данные для rows
    {
        label: "Feature",
        id: "feature"
    },
    {
        label: "Task",
        id: "task",
        collapsed: true
    },
    {...}
];

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

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

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

Используйте setConfig() или parse() для загрузки данных columns, rows, cards и links после инициализации:

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

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

// или board.parse({ columns, cards, rows });

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

Информацию об интеграции с несколькими виджетами см. в разделе Интеграция с виджетами DHTMLX.

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

• getAreaCards() - возвращает объекты данных всех cards в указанной column (и, опционально, row)
• getColumnCards() - возвращает объекты данных всех cards в указанной column
• getCard() - возвращает объект данных card по ID
• serialize() - возвращает данные Kanban в виде JSON-объекта

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

• api.getReactiveState() - возвращает реактивные свойства DataStore
• api.getState() - возвращает текущие свойства DataStore
• api.getStores() - возвращает { data: DataStore }

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

• export.json() - скачивает данные Kanban в виде JSON-файла

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

• addCard() - добавляет новую card
• addColumn() - добавляет новую column
• addRow() - добавляет новую row
• duplicateCard() - дублирует card по ID

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

• updateCard() - обновляет card по ID
• updateColumn() - обновляет column по ID
• updateRow() - обновляет row по ID

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

• deleteCard() - удаляет card по ID
• deleteColumn() - удаляет column по ID
• deleteRow() - удаляет row по ID

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

• moveCard() - перемещает card в указанную column и row
• moveColumn() - перемещает column на новую позицию
• moveRow() - перемещает row на новую позицию

Управление комментариями

• addComment() - добавляет комментарий к card по ID
• updateComment() - обновляет комментарий по ID
• deleteComment() - удаляет комментарий по ID

Управление links

• addLink() - добавляет новый link между cards
• deleteLink() - удаляет link по ID

Управление выделением cards

• getSelection() - возвращает ID выбранных в данный момент cards
• selectCard() - выделяет card по ID
• unselectCard() - снимает выделение с card по ID

Пример

Следующий пример использует API Kanban для работы с данными во время выполнения: