Arbeiten mit Daten

Dieser Leitfaden behandelt Datenoperationen in Kanban: das Laden von Anfangsdaten, das Lesen und Exportieren von Daten, das Ändern von Karten, Spalten, Zeilen und Links sowie die Verwaltung von Kommentaren und der Auswahl.

Anfangsdaten laden

Beim Initialisieren von Kanban übergeben Sie die Anfangsdaten über die Eigenschaften columns, cards, rows und links.

Das folgende Code-Beispiel übergibt Daten für Spalten, Karten, Zeilen und Links an den Kanban-Konstruktor:

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",
    },
    {...}
];

// Kanban mit den Anfangsdaten initialisieren
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

Daten aus einer lokalen Quelle laden

Verwenden Sie setConfig() oder parse(), um Daten für Spalten, Zeilen, Karten und Links nach der Initialisierung zu laden:

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

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

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

Daten mit Gantt und Scheduler synchronisieren

Für die Integration mit mehreren Widgets siehe Integration mit DHTMLX-Widgets.

Daten abrufen

• getAreaCards() - gibt Datenobjekte aller Karten der angegebenen Spalte (und optional Zeile) zurück
• getColumnCards() - gibt Datenobjekte aller Karten der angegebenen Spalte zurück
• getCard() - gibt ein Datenobjekt einer Karte anhand der ID zurück
• serialize() - gibt die Kanban-Daten als JSON-Objekt zurück

Status abrufen

• api.getReactiveState() - gibt die reaktiven Eigenschaften des DataStore zurück
• api.getState() - gibt die aktuellen Eigenschaften des DataStore zurück
• api.getStores() - gibt { data: DataStore } zurück

Daten exportieren

• export.json() - lädt die Kanban-Daten als JSON-Datei herunter

Neue Elemente hinzufügen

• addCard() - fügt eine neue Karte hinzu
• addColumn() - fügt eine neue Spalte hinzu
• addRow() - fügt eine neue Zeile hinzu
• duplicateCard() - dupliziert eine Karte anhand der ID

Elemente aktualisieren

• updateCard() - aktualisiert eine Karte anhand der ID
• updateColumn() - aktualisiert eine Spalte anhand der ID
• updateRow() - aktualisiert eine Zeile anhand der ID

Elemente löschen

• deleteCard() - entfernt eine Karte anhand der ID
• deleteColumn() - entfernt eine Spalte anhand der ID
• deleteRow() - entfernt eine Zeile anhand der ID

Elemente verschieben

• moveCard() - verschiebt eine Karte in die Zielspalte und -zeile
• moveColumn() - verschiebt eine Spalte an eine neue Position
• moveRow() - verschiebt eine Zeile an eine neue Position

Kommentare verwalten

• addComment() - fügt einer Karte anhand der ID einen Kommentar hinzu
• updateComment() - aktualisiert einen Kommentar anhand der ID
• deleteComment() - löscht einen Kommentar anhand der ID

Links verwalten

• addLink() - fügt einen neuen Link zwischen Karten hinzu
• deleteLink() - löscht einen Link anhand der ID

Kartenauswahl verwalten

• getSelection() - gibt die IDs der aktuell ausgewählten Karten zurück
• selectCard() - wählt eine Karte anhand der ID aus
• unselectCard() - hebt die Auswahl einer Karte anhand der ID auf

Beispiel

Das folgende Beispiel verwendet die Kanban-API, um Daten zur Laufzeit zu bearbeiten: