Mehrfachauswahl und Massenoperationen

Die To Do List-Bibliothek ermöglicht die Auswahl mehrerer Aufgaben und deren gleichzeitige Verwaltung.

Info

Erfahren Sie, wie Sie Aufgaben über die Benutzeroberfläche auswählen und mehrere Aufgaben verwalten.

Anfänglich ausgewählte Aufgaben

Um eine To Do List mit anfänglich ausgewählten Aufgaben zu erstellen, verwenden Sie die Konfigurationseigenschaft selected. Das folgende Beispiel wählt drei Aufgaben bei der Initialisierung vor:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
        { id: "2", text: "Task 2" },
        { id: "2.1", text: "Task 2.1", parent: "2" },
        { id: "2.1.1", text: "Task 2.1.1", parent: "2.1" },
        { id: "2.2", text: "Task 2.2", parent: "2" },
    ],
    selected: ["1.1", "1.2", "2.2"],
});

console.log(list.getSelection()); // ["1.1", "1.2", "2.2"]

Aufgaben auswählen

Verwenden Sie die Methode selectTask(), um Aufgaben nach der Initialisierung auszuwählen. Die Methode nimmt zwei Parameter entgegen:

• id — ID der auszuwählenden Aufgabe
• join — ob die Aufgabe zur bestehenden Auswahl hinzugefügt werden soll

Eine Aufgabe auswählen

Standardmäßig ist der Parameter join auf false gesetzt. Die Methode wählt nur die angegebene Aufgabe aus und setzt die zuvor ausgewählten zurück.

Der folgende Code-Ausschnitt ersetzt die aktuelle Auswahl durch eine einzelne Aufgabe:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
        { id: "2", text: "Task 2" },
        { id: "2.1", text: "Task 2.1", parent: "2" },
        { id: "2.1.1", text: "Task 2.1.1", parent: "2.1" },
        { id: "2.2", text: "Task 2.2", parent: "2" },
    ],
    selected: ["1.1", "1.2", "2.2"],
});

console.log(list.getSelection()) // ["1.1", "1.2", "2.2"]

list.selectTask({ 
    id: "2.1", 
    join: false // Auswahl der zuvor ausgewählten Aufgaben zurücksetzen
});

console.log(list.getSelection()) // ["2.1"]

Mehrere Aufgaben auswählen

Um mehrere Aufgaben auszuwählen, setzen Sie den Parameter join auf true. Die Methode selectTask() fügt die angegebene Aufgabe dann zur aktuellen Auswahl hinzu.

Das folgende Beispiel wählt mehrere Aufgaben in einer Schleife aus:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
        { id: "2", text: "Task 2" },
        { id: "2.1", text: "Task 2.1", parent: "2" },
        { id: "2.1.1", text: "Task 2.1.1", parent: "2.1" },
        { id: "2.2", text: "Task 2.2", parent: "2" },
    ]
});

const selected = ["1.1", "1.2", "2.2"];

for (id of selected) {
    list.selectTask({ id, join: true });
}

console.log(list.getSelection()) // ["1.1", "1.2", "2.2"]

Der folgende Code-Ausschnitt fügt der bestehenden Auswahl eine weitere Aufgabe hinzu:

console.log(list.getSelection()) // ["1.1", "1.2", "2.2"]

list.selectTask({ id: "2.1", join: true });

console.log(list.getSelection()) // ["1.1", "1.2", "2.2", "2.1"]

Alle ausgewählten Aufgaben abrufen

Um die IDs aller aktuell ausgewählten Aufgaben abzurufen, verwenden Sie die Methode getSelection(). Das folgende Beispiel zeigt den Unterschied zwischen unsortierter und sortierter Ausgabe:

// sortiert - deaktiviert
list.getSelection({ sorted: false }); // ["1.2", "1.1", "2.2", "2.1"]

// sortiert - aktiviert
list.getSelection({ sorted: true }); // ["1.1", "1.2", "2.1", "2.2"]

Aktivieren Sie den Parameter sorted, um die IDs der ausgewählten Aufgaben in der Reihenfolge zu erhalten, in der sie auf dem Bildschirm erscheinen.

Ausgewählte Aufgaben verwalten

Nach der Auswahl mehrerer Aufgaben können Operationen auf alle gleichzeitig angewendet werden.

Die Bibliothek stellt die Methode eachSelected() zur Verfügung, um über alle ausgewählten Aufgaben zu iterieren. Die Methode nimmt zusätzliche Parameter entgegen — sorted und reversed — die Sortierung und Iterationsrichtung steuern.

Das folgende Beispiel löscht alle ausgewählten Aufgaben:

list.eachSelected(id => {
    list.deleteTask({ id });
}, true);

Liste der verfügbaren Operationen

Über API-Methoden können folgende Massenoperationen für mehrere ausgewählte Aufgaben durchgeführt werden:

• copyTask() — Aufgaben kopieren
• pasteTask() — Aufgaben einfügen
• moveTask() — Aufgaben verschieben
• deleteTask() — Aufgaben löschen
• checkTask(), uncheckTask() — Aufgaben als erledigt oder unerledigt markieren
• indentTask(), unindentTask() — Verschachtelungsebene von Aufgaben erhöhen oder verringern

Auswahl zurücksetzen

Eine Aufgabe abwählen

Um die Auswahl einer Aufgabe aufzuheben, übergeben Sie die Aufgaben-ID als Parameter an die Methode unselectTask(). Der folgende Code-Ausschnitt hebt die Auswahl einer einzelnen Aufgabe auf:

list.unselectTask({ id: "1.1" });

Alle Aufgaben abwählen

Um die Auswahl aller aktuell ausgewählten Aufgaben aufzuheben, übergeben Sie id: null an die Methode unselectTask():

list.unselectTask({ id: null });

Tastaturkürzel

Info

Weitere Informationen finden Sie im Handbuch zur Tastaturnavigation.