Zum Hauptinhalt springen

items

Beschreibung​

Optional. Ein Array, das die auf der Kanban Toolbar angeordneten Steuerelemente enthält.

Verwendung​

items?: [
    "search" | {
        // Suchparameter
        type: "search",
        options?: [
            {
                id: string,
                label: string,
                searchRule?: (card, value, by) => {
                    return boolean
                }
            }, {...}
        ],
        resultTemplate?: template(searchResult => {
            return "Die HTML-Vorlage des Suchergebnisses";
        }) 
    },
    "sort" | {
        // Sortierparameter
        type: "sort",
        options?: [
            {    
                text: string,
                by?: string, // by?: ((card: object) => any),
                dir?: "asc" | "desc"
            }, {...}
        ]  
    },
    "spacer",
    "undo",
    "redo",
    "addColumn",
    "addRow",
    custom_control // string oder function
];

Parameter​

Im items Array können Sie die folgenden Parameter verwenden:

Info

Um eine benutzerdefinierte Suchleiste zu konfigurieren, übergeben Sie ein Objekt mit diesen Parametern:​

  • type - (erforderlich) gibt den Steuerungstyp an ("search")
  • options - (optional) ein Array zur Definition der Suchparameter. Jedes Objekt (Suchoption) kann enthalten:
    • id - (erforderlich) der Kartenfeld-Schlüssel, der für die Suche verwendet wird
    • label - (erforderlich) der im Dropdown der Suchleiste angezeigte Name der Option
    • searchRule (optional) - eine benutzerdefinierte Funktion zur Definition der Suchkriterien. Sie erhält:
      • card - das Karten-Datenobjekt
      • value - der Such-Eingabewert
      • by - der Kartenfeld-Schlüssel, der für die Suche verwendet wird
  • searchResult - (optional) eine Vorlage zur Anpassung der Anzeige der Suchergebnisse
items: [
    "search", // Standard-Suchleiste
    // weitere Steuerelemente
]

// oder 

items: [
    { // benutzerdefinierte Suchleiste
        type: "search",
        options: [
            {
                id: "label",
                label: "Nach Bezeichnung"
            },
            {
                id: "start_date",
                label: "Nach Datum",
                searchRule: (card, value, by) => {
                    const date = card[by];
                    return date?.toString().includes(value);
                }
            }
        ],
        resultTemplate: kanban.template(searchResult => {
            return `<div className="list-item">
                <div className="list-item-text">${searchResult.result.label}</div>
                ${searchResult.result.description ? `<div className="list-item-text item-description">${searchResult.result.description}</div>` : ""}
            </div>`
        })
    },
    // weitere Steuerelemente
]
Info

Um eine Standard-Sortiersteuerung hinzuzufügen, verwenden Sie einfach den String "sort".​

Um eine benutzerdefinierte Sortiersteuerung zu konfigurieren, übergeben Sie ein Objekt mit den folgenden Parametern:​

  • type - (erforderlich) gibt den Steuerungstyp an ("sort")
  • options - (optional) ein Array zur Definition der Sortierparameter. Jedes Objekt (Sortieroption) kann enthalten:
    • text - (erforderlich) der im Sortier-Dropdown angezeigte Name der Option
    • by - (optional) der Kartenfeld-Schlüssel oder eine Funktion, die zum Sortieren verwendet wird
    • dir - (optional) die Sortierrichtung, entweder "asc" oder "desc"
items: [
    "sort", // Standard-Sortiersteuerung
    // weitere Steuerelemente
]
// oder 
items: [
    { // benutzerdefinierte Sortiersteuerung
        type: "sort",
        options: [
            {
                text: "Sortieren nach Bezeichnung",
                by: "label",
                dir: "asc"
            },
            {
                text: "Sortieren nach Beschreibung",
                by: "description",
                dir: "desc"
            }
        ]
    }, {...} // weitere Steuerelemente
]
  • "spacer" - fügt einen Leerraum zwischen den Steuerelementen ein
  • "undo" - Steuerung zum Rückgängig machen von Aktionen (ein Klick geht einen Schritt zurück)
  • "redo" - Steuerung zum Wiederherstellen von Aktionen (ein Klick geht einen Schritt vorwärts)
  • "addColumn" - Steuerung zum Hinzufügen neuer Spalten
  • "addRow" - Steuerung zum Hinzufügen neuer Zeilen
  • custom_control - (optional) eine benutzerdefinierte Steuerung, die ein String oder eine Funktion sein kann. Details finden Sie im Abschnitt Customization.

Beispiel​

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

new kanban.Toolbar("#toolbar", {
    api: board.api,
    items: [
        {
            type: "search",
            resultTemplate: kanban.template(searchResult => {
                return `<div className="list-item">
                            <div className="list-item-text">${searchResult.result.label}</div>
                            ${searchResult.result.description ? `<div className="list-item-text item-description">${searchResult.result.description}</div>` : ""}
                        </div>`
            })
        },
        "spacer",
        "sort",
        "undo",
        "redo", 
        "addColumn",
        "addRow"
    ]
});

Änderungsprotokoll:

  • Die "Undo" und "Redo" Steuerungen wurden in Version v1.3 eingeführt
  • Der Parameter items.options[0].label in der sort Steuerung wurde in v1.4 zu items.options[0].text umbenannt
  • Der Parameter items.searchResult für die "search" Steuerung wurde in v1.6 hinzugefügt

Verwandte Artikel: Konfiguration und Anpassung

Verwandte Beispiele: