Zum Hauptinhalt springen

Initialisierung

Diese Anleitung beschreibt, wie Sie DHTMLX Spreadsheet auf einer Seite erstellen und Ihrer Anwendung ein voll funktionsfähiges Arbeitsblatt hinzufügen. Führen Sie die folgenden Schritte aus, um die Komponente einsatzbereit zu machen:

  1. Binden Sie die DHTMLX Spreadsheet-Quelldateien auf einer Seite ein.
  2. Erstellen Sie einen Container für DHTMLX Spreadsheet.
  3. Initialisieren Sie DHTMLX Spreadsheet mit dem Objekt-Konstruktor.

Quelldateien einbinden

Laden Sie das Paket herunter und entpacken Sie es in einen Ordner Ihres Projekts.

Um DHTMLX Spreadsheet zu erstellen, müssen Sie 2 Quelldateien auf Ihrer Seite einbinden:

  • spreadsheet.js
  • spreadsheet.css

Stellen Sie sicher, dass Sie korrekte relative Pfade zu diesen Dateien setzen:

index.html
<script type="text/javascript" src="codebase/spreadsheet.js"></script>  
<link rel="stylesheet" href="codebase/spreadsheet.css">

Die Struktur des Spreadsheet-Pakets ist wie folgt:

  • sources - die Quellcode-Dateien der Bibliothek; sie sind leicht lesbar und hauptsächlich für das Debugging gedacht;
  • codebase - die obfuskierten Code-Dateien der Bibliothek; sie sind deutlich kleiner und für den Einsatz in der Produktion vorgesehen. Binden Sie diese Dateien in Ihre Apps ein, wenn diese fertig sind;
  • samples - die Code-Beispiele;
  • docs - die vollständige Dokumentation der Komponente.

Container erstellen

Fügen Sie einen Container für Spreadsheet hinzu und geben Sie ihm eine ID, zum Beispiel "spreadsheet":

index.html
<div id="spreadsheet"></div>

DHTMLX Spreadsheet initialisieren

Initialisieren Sie DHTMLX Spreadsheet mit dem dhx.Spreadsheet-Objekt-Konstruktor. Der Konstruktor hat zwei Parameter:

index.js
// DHTMLX Spreadsheet erstellen
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
// Konfigurationsoptionen
});

Konfigurationseigenschaften

Siehe die vollständige Liste der Eigenschaften, die Sie im Spreadsheet-Konfigurationsobjekt angeben können.

Sie können Konfigurationsoptionen bei der Initialisierung als zweiten Parameter des Konstruktors festlegen: