Arbeiten mit Daten

Initiales Laden von Daten

Beim Initialisieren von Kanban können Sie die Anfangsdaten für Spalten, Karten, Zeilen und Verknüpfungen bereitstellen.

const columns = [ // Daten für Spalten
    {
        label: "Backlog",
        id: "backlog"
    },
    {
        label: "In progress",
        id: "inprogress"
    },
    {
        label: "Testing",
        id: "testing"
    },
    {...}
];

const cards = [ // Daten für Karten
    {
        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 = [ // Daten für Zeilen
    {
        label: "Feature",
        id: "feature"
    },
    {
        label: "Task",
        id: "task",
        collapsed: true
    },
    {...}
];

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

// Initialisierung von Kanban mit den Anfangsdaten für Spalten, Karten und Zeilen
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

Laden von Daten aus einer lokalen Quelle

Um Daten für columns, rows, cards und links aus einer lokalen Quelle zu laden, können Sie die Methode parse() verwenden. Sie nimmt ein Objekt mit den benötigten Daten als Parameter entgegen.

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

// Laden von Daten in Kanban
board.parse({ columns, cards, rows });

Kanban-Daten mit Gantt und Scheduler synchronisieren

In diesem Beispiel sehen Sie, wie Kanban-Daten mit anderen DHTMLX-Widgets, nämlich Gantt und Scheduler, synchronisiert werden können:

Kanban-Daten abrufen

Um Kanban-Daten abzurufen, können Sie folgende Methoden verwenden:

• getAreaCards() – gibt ein Array mit Datenobjekten aller Karten der angegebenen Spalte (und Zeile) zurück
• getCard() – gibt ein Datenobjekt einer Karte anhand der angegebenen ID zurück
• serialize() – serialisiert Kanban-Daten zu JSON

Kanban-Status abrufen

Um den Status von Kanban abzurufen, können Sie folgende Methoden verwenden:

• api.getReactiveState() – gibt ein Objekt mit den reaktiven Eigenschaften des StateStore zurück
• api.getState() – gibt ein Objekt mit den aktuellen Eigenschaften des StateStore zurück
• api.getStores() – gibt ein Objekt mit den StateStore und DataStore Objekten zurück

Kanban-Daten exportieren

Um Kanban-Daten zu exportieren, können Sie folgende Methode verwenden:

• export.json() – exportiert die Kanban-Daten in eine JSON-Datei

Neue Elemente hinzufügen

Um neue cards, columns und rows hinzuzufügen, können Sie die folgenden Methoden verwenden:

• addCard() – fügt eine neue Karte zu Kanban hinzu
• addColumn() – fügt eine neue Spalte zu Kanban hinzu
• addRow() – fügt eine neue Zeile zu Kanban hinzu

Elemente aktualisieren

Um cards, columns und rows zu aktualisieren, können Sie die folgenden Methoden verwenden:

• updateCard() – aktualisiert die Kartendaten anhand der angegebenen ID
• updateColumn() – aktualisiert die Spaltendaten anhand der angegebenen ID
• updateRow() – aktualisiert die Zeilendaten anhand der angegebenen ID

Elemente löschen

Um cards, columns und rows zu entfernen, können Sie die folgenden Methoden verwenden:

• deleteCard() – entfernt eine Karte aus Kanban anhand der angegebenen ID
• deleteColumn() – entfernt eine Spalte aus Kanban anhand der angegebenen ID
• deleteRow() – entfernt eine Zeile aus Kanban anhand der angegebenen ID

Elemente verschieben

Um cards, columns und rows zu verschieben, können Sie die folgenden Methoden verwenden:

• moveCard() – verschiebt eine Karte in die gewünschte Spalte und Zeile
• moveColumn() – verschiebt eine Spalte an die gewünschte Position
• moveRow() – verschiebt eine Zeile an die gewünschte Position

Beispiel

In diesem Beispiel sehen Sie, wie Sie die Kanban-API für die Arbeit mit Daten verwenden können: