Initialisierung

Diese Anleitung erklärt, wie Sie Pivot auf einer Seite erstellen und Ihre Anwendung mit Pivot-Tabellenfunktionen erweitern. Führen Sie die folgenden Schritte aus, um eine einsatzbereite Komponente zu erhalten:

1. Binden Sie die Pivot-Quelldateien auf der Seite ein.
2. Erstellen Sie einen Container für Pivot.
3. Initialisieren Sie Pivot mit einem Konstruktor.

Quelldateien einbinden

Eine Pivot-App benötigt zwei Quelldateien auf der Seite. Anweisungen zum Herunterladen des Pakets finden Sie unter Pakete herunterladen.

Binden Sie die folgenden Dateien ein:

• pivot.js
• pivot.css

Legen Sie die korrekten relativen Pfade zu den Quelldateien fest:

index.html

<script type="text/javascript" src="./dist/pivot.js"></script>  
<link rel="stylesheet" href="./dist/pivot.css">

Container erstellen

Pivot wird in ein HTML-Container-Element gerendert. Fügen Sie einen Container hinzu und weisen Sie ihm eine ID zu, zum Beispiel "root":

index.html

<div id="root"></div>

Pivot initialisieren

Der Konstruktor pivot.Pivot akzeptiert zwei Parameter:

• die ID des HTML-Containers
• ein Objekt mit Konfigurationseigenschaften

Der folgende Code-Ausschnitt erstellt eine Pivot-Instanz im Container "root" mit initialen Feldern, Daten und Struktur:

// Pivot erstellen
const table = new pivot.Pivot("#root", {
    // Konfigurationseigenschaften
    fields,
    data,
    config: {
        rows: ["studio", "genre"],
        columns: ["title"],
        values: [
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

Der Konstruktor gibt eine Pivot-Instanz zurück. Rufen Sie API-Methoden auf der zurückgegebenen Instanz auf:

• getTable — Zugriff auf die zugrunde liegende Table-Widget-Instanz erhalten
• setConfig — die aktuelle Pivot-Konfiguration aktualisieren
• setLocale — eine neue Locale auf Pivot anwenden
• showConfigPanel — das Konfigurationspanel ein- oder ausblenden

Konfigurationseigenschaften

Der Pivot-Konstruktor akzeptiert ein Objekt mit Konfigurationseigenschaften, die Daten, Layout und Verhalten steuern.

Info

Die vollständige Liste der Eigenschaften zur Konfiguration von Pivot finden Sie unter Eigenschaften-Übersicht.

Beispiel

Der folgende Ausschnitt initialisiert Pivot mit den initialen Daten: