Zum Hauptinhalt springen

Erste Schritte

Dieses Tutorial führt Sie durch die Schritte, um ein vollständig funktionsfähiges DHTMLX Spreadsheet auf einer Seite einzurichten. Die Komponente eignet sich besonders für die Verwaltung großer Datenmengen, wenn Sie die Ergebnisse von Berechnungen speichern und reproduzieren möchten.

DHTMLX Spreadsheet initialized with a sample data table in a browser window

Schritt 1. Quelldateien einbinden​

Erstellen Sie zunächst eine HTML-Datei mit dem Namen index.html. Binden Sie anschließend die Spreadsheet-Quelldateien darin ein. Die detaillierte Beschreibung des DHTMLX Spreadsheet-Pakets finden Sie hier.

Es sind zwei notwendige Dateien erforderlich:

  • die JS-Datei von DHTMLX Spreadsheet
  • die CSS-Datei von DHTMLX Spreadsheet

und

  • der Link zur Google Fonts-Quelldatei für die korrekte Darstellung von Schriftarten.
index.html
<!DOCTYPE html>
<html>
<head>
    <title>How to Start with DHTMLX Spreadsheet</title>
    <script src="codebase/spreadsheet.js"></script>   

    <link href="codebase/spreadsheet.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <script>
    // Ihr Code kommt hier hin
    </script>
</body>
</html>

Spreadsheet über npm oder yarn installieren​

Sie können JavaScript Spreadsheet mit dem Paketmanager yarn oder npm in Ihr Projekt importieren.

Testversion von Spreadsheet über npm oder yarn installieren​

Info

Wenn Sie die Testversion von Spreadsheet verwenden möchten, laden Sie das Spreadsheet-Testpaket herunter und folgen Sie den Schritten in der README-Datei. Beachten Sie, dass die Testversion von Spreadsheet nur 30 Tage lang verfügbar ist.

PRO-Version von Spreadsheet über npm oder yarn installieren​

Info

Sie können direkt im Kundenbereich auf das private DHTMLX npm zugreifen, indem Sie Ihren Login und Ihr Passwort für npm generieren. Eine detaillierte Installationsanleitung ist dort ebenfalls verfügbar. Beachten Sie, dass der Zugriff auf das private npm nur verfügbar ist, solange Ihre proprietäre Spreadsheet-Lizenz aktiv ist.

Schritt 2. Spreadsheet erstellen​

Jetzt können Sie Spreadsheet zur Seite hinzufügen. Erstellen Sie zunächst einen DIV-Container und platzieren Sie DHTMLX Spreadsheet darin. Ihre Schritte sind:

  • einen DIV-Container in der index.html-Datei angeben
  • DHTMLX Spreadsheet mit dem dhx.Spreadsheet-Konstruktor initialisieren

Als Parameter nimmt die Konstruktorfunktion den HTML-Container, in den Spreadsheet eingefügt werden soll, sowie das Spreadsheet-Konfigurationsobjekt entgegen.

index.html
<!DOCTYPE html>
<html>
<head>
    <title>How to Start with DHTMLX Spreadsheet</title>
    <script src="codebase/spreadsheet.js"></script>   
   
    <link href="codebase/spreadsheet.css" rel="stylesheet">  
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <div id="spreadsheet_container"></div>
    <script>
        const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
            //config options
        });
    </script>
</body>
</html>

Schritt 3. Spreadsheet konfigurieren​

Als Nächstes können Sie zusätzliche Konfigurationsoptionen festlegen, die die Spreadsheet-Komponente bei der Initialisierung neben den Standardoptionen haben soll.

Sie können das Erscheinungsbild von Spreadsheet mit mehreren Optionen anpassen, zum Beispiel: toolbarBlocks, rowsCount und colsCount. Weitere Details finden Sie hier.

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    toolbarBlocks: ["columns", "rows", "clear"],
    rowsCount: 10,
    colsCount: 10
});

Die Konfiguration von DHTMLX Spreadsheet ist sehr flexibel, sodass Sie sie jederzeit ändern können. Lesen Sie die zugehörige Anleitung, um die Grundlagen der Spreadsheet-Konfiguration kennenzulernen.

Schritt 4. Daten in Spreadsheet laden​

Der letzte Schritt besteht darin, Spreadsheet mit Daten zu befüllen. DHTMLX Spreadsheet akzeptiert Daten im JSON-Format. Neben den Daten können Sie in einem Datensatz auch notwendige Styles übergeben. Beim Laden von Inline-Daten müssen Sie die Methode parse() verwenden und ihr ein Objekt mit den Daten übergeben, wie im folgenden Beispiel:

data.json
const data = [
    { "cell": "a1", "value": "Country" },
    { "cell": "b1", "value": "Product" },
    { "cell": "c1", "value": "Price" },
    { "cell": "d1", "value": "Amount" },
    { "cell": "e1", "value": "Total Price" },

    { "cell": "a2", "value": "Ecuador" },
    { "cell": "b2", "value": "Banana" },
    { "cell": "c2", "value": 6.68 },
    { "cell": "d2", "value": 430 },
    { "cell": "e2", "value": 2872.4 },

    { "cell": "a3", "value": "Belarus" },
    { "cell": "b3", "value": "Apple" },
    { "cell": "c3", "value": 3.75 },
    { "cell": "d3", "value": 600 },
    { "cell": "e3", "value": 2250 }
]

// Spreadsheet initialisieren
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    //config
});
// Daten in Spreadsheet laden
spreadsheet.parse(data);

Verwandtes Beispiel: Spreadsheet. Benutzerdefinierte Zellenanzahl

Wie geht es weiter​

Das war alles. In vier Schritten erhalten Sie ein praktisches Werkzeug für die Arbeit mit tabellarischen Daten. Jetzt können Sie mit Ihren Daten arbeiten oder DHTMLX Spreadsheet weiter erkunden.

Need more help?Contact Support