Mit Tabellen arbeiten

Ab v4.1 können Sie mit mehreren Tabellen im Spreadsheet arbeiten.

Dieser Artikel beschreibt, wie Sie eine neue Tabelle hinzufügen, eine nicht benötigte Tabelle entfernen, alle Tabellen abrufen und die aktuell aktive Tabelle über API-Methoden ermitteln. Außerdem wird erläutert, wie Sie mehrere Tabellen gleichzeitig in das Spreadsheet laden.

Hinweis

Informationen zur Interaktion mit mehreren Tabellen über die Benutzeroberfläche finden Sie in unserem Benutzerhandbuch.

Ab v6.0 übernimmt das Sheet Manager-Modul die Tabellenverwaltung über die Eigenschaft spreadsheet.sheets. Die dedizierte Sheet Manager API ersetzt die tabellenspezifischen Methoden, die zuvor direkt an der Spreadsheet-Instanz verfügbar waren.

Mehrere Tabellen laden

Um mehrere Tabellen in das Spreadsheet zu laden, bereiten Sie die Daten mit der gewünschten Anzahl von Tabellen und deren Konfiguration vor und übergeben Sie diese als Parameter an die Methode parse(). Die Daten müssen ein object sein. Sehen Sie die Liste der Attribute, die das Objekt enthalten kann.

Hinweis

Wenn die Konfigurationsoption multiSheets auf false gesetzt ist, wird nur eine Tabelle erstellt.

Eine neue Tabelle hinzufügen

Um eine neue Tabelle in das Spreadsheet einzufügen, verwenden Sie die Methode sheets.add() und übergeben Sie den Namen der neuen Tabelle als Parameter:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

// Tabelle mit benutzerdefiniertem Namen hinzufügen
const newSheetId = spreadsheet.sheets.add("Q4 Report");
console.log(newSheetId); // z. B. "sheet_2"

// Tabelle mit automatisch generiertem Namen hinzufügen
const anotherId = spreadsheet.sheets.add();

Die Methode gibt die ID der erstellten Tabelle zurück.

Eine Tabelle entfernen

Sie können eine Tabelle anhand ihrer ID aus dem Spreadsheet entfernen, indem Sie die Methode sheets.remove() verwenden:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

// Tabelle anhand ihrer ID entfernen
spreadsheet.sheets.remove("sheet_2");

Beachten Sie, dass eine Tabelle nicht entfernt wird, wenn das Spreadsheet weniger als 2 Tabellen enthält.

Aktive Tabelle festlegen

Um die aktive Tabelle nach der Initialisierung des Spreadsheets dynamisch zu wechseln, verwenden Sie die Methode sheets.setActive(). Diese nimmt die ID einer Tabelle als Parameter entgegen:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

// Zur zweiten Tabelle wechseln
spreadsheet.sheets.setActive("sheet_2");

// Wechsel überprüfen
const active = spreadsheet.sheets.getActive();
console.log(active.name); // "Sheet 2"

Verwandtes Beispiel: Spreadsheet. Aktive Tabelle festlegen

Aktive Tabelle abrufen

Sie können die aktuell aktive Tabelle mit der Methode sheets.getActive() abrufen:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

const active = spreadsheet.sheets.getActive();
console.log(active.name); // "Sheet 1"
console.log(active.id);   // "sheet_1"

Die Methode gibt ein Objekt mit den Attributen name und id der aktuell aktiven Tabelle zurück.

Alle Tabellen abrufen

Die Methode sheets.getAll() gibt alle Tabellen des Spreadsheets als Array von Tabellenobjekten zurück:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

const allSheets = spreadsheet.sheets.getAll();
console.log(allSheets);
// [
//   { id: "sheet_1", name: "Sheet 1" },
//   { id: "sheet_2", name: "Sheet 2" }
// ]

Eine Tabelle anhand der ID abrufen

Um ein einzelnes Tabellenobjekt anhand seiner ID abzurufen, verwenden Sie die Methode sheets.get():

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

const sheet = spreadsheet.sheets.get("sheet_1");
console.log(sheet.name); // "Sheet 1"

Tabellen leeren

Sie können die Daten einer bestimmten Tabelle anhand ihrer ID mit der Methode sheets.clear() leeren:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    multiSheets: true
});
spreadsheet.parse(data);

// Bestimmte Tabelle anhand der ID leeren
spreadsheet.sheets.clear("sheet_1");

// Aktuell aktive Tabelle leeren
spreadsheet.sheets.clear();

Verwandtes Beispiel: Spreadsheet. Leeren

Wenn Sie das gesamte Spreadsheet auf einmal leeren möchten, verwenden Sie die Methode clear().