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

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

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

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

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 с начальными данными для columns, cards и rows
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

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

Чтобы загрузить данные для columns, rows, cards и links из локального источника, используйте метод parse(). Он принимает объект с необходимыми данными в качестве параметра.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • addCard() – добавляет новую card в Kanban
  • addColumn() – добавляет новую column в Kanban
  • addRow() – добавляет новую row в Kanban

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

Для обновления cards, columns и rows используйте следующие методы:

  • updateCard() – обновляет данные card по заданному ID
  • updateColumn() – обновляет данные column по заданному ID
  • updateRow() – обновляет данные row по заданному ID

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

Для удаления cards, columns и rows используйте следующие методы:

  • deleteCard() – удаляет card из Kanban по заданному ID
  • deleteColumn() – удаляет column из Kanban по заданному ID
  • deleteRow() – удаляет row из Kanban по заданному ID

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

Для перемещения cards, columns и rows используйте следующие методы:

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

Пример​

В этом примере показано, как использовать API Kanban для работы с данными: