Heim > Artikel > Web-Frontend > Erstellen Sie mit Handsontable.js ein Datenraster in JavaScript

Erstellen Sie mit Handsontable.js ein Datenraster in JavaScript

PHPznach vorne: 2023-09-02 13:01:02676Durchsuche

使用 Handsontable.js 在 JavaScript 中创建数据网格

Handsontable ist eine JavaScript-Bibliothek, die wir verwenden, wenn wir ein Datenraster erstellen möchten. Es bietet ein tabellenähnliches Erlebnis, das Excel sehr ähnlich ist. In diesem Tutorial erklären wir, wie Sie mit handsontable.js ein Datenraster mit Ihren eigenen Daten erstellen. Darüber hinaus erfahren Sie, wie Sie die verschiedenen in handsontable.js verfügbaren Optionen verwenden.

Während Sie möglicherweise verschiedene Tabellenkalkulationen verwenden können (z. B. den Grid Creator), unterscheidet sich handsontable.js von den meisten Tabellenkalkulationen, da es auch mit einfachem JavaScript, React oder Angular verwendet werden kann.

Bevor Sie handsontable.js verwenden, müssen Sie es zunächst auf Ihrem lokalen Computer installieren. Es gibt verschiedene Möglichkeiten, handsontable.js zu installieren.

Die einfachste Methode ist die Verwendung eines CDN-Links im HTML-Code. Wir fügen einfach den folgenden HTML-Code in das

-Tag ein.

<link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
<script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js"></script>

Im obigen Codeausschnitt importieren wir zwei Dateien über CDN. Dies sind „handsontable.full.min.css“, das zum Importieren der „handsontable-Stile“ verwendet wird, und dann importieren wir „handsontable.full.min.js“, das zum Importieren des JavaScript-Codes verwendet wird.

Wenn Sie kein Interesse an der Verwendung von CDN-Links haben, können Sie diese mit Hilfe von npm oder yarn installieren. Erwägen Sie die Verwendung der unten gezeigten NPM-Befehle.

npm install handsontable

Verwenden Sie den folgenden Befehl für Garn.

yarn add handsontable

Sobald Sie einen dieser Befehle verwenden, müssen Sie nur noch diese beiden Zeilen wie unten gezeigt im

-Tag hinzufügen, um mit der Verwendung von handsontable zu beginnen.

<script src="node_modules/handsontable/dist/handsontable.full.min.js"></script>
<link href="node_modules/handsontable/dist/handsontable.full.min.css" rel="stylesheet" media="screen">

Im <script>-Tag und <link>-Tag importieren wir die entsprechenden „js“- und „CSS“-Dateien aus dem Ordner „node_modules“. Jetzt können wir handsontable.js verwenden. </script>

index.html

Der erste Schritt besteht darin, eine HTML-Datei zu erstellen. Benennen Sie die Datei index.html. Der endgültige Code für die von mir erstellte Datei index.html sieht folgendermaßen aus.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Data Grid using handsontable.js</title>
   <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js">
   </script>
   <link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
   <style>
      .heading-div {
         text-align: center;
         margin: 0 auto;
         margin-left: 0;
         max-width: 400px;
      }
   </style>
</head>
<body>
   <div class="heading-div">
      <h1>
         <center>Creating a data-grid!</center>
      </h1>
   </div>
   <div class="container"></div>
   <script src="app.js"></script>
</body>
</html>

Im obigen HTML-Code haben wir zwei div-Klassen verwendet. Im ersten erstellen wir einen Header, im nächsten lassen wir ihn leer, aber dieses leere div hat eine Klasse namens container, die wir in unseren JavaScript-Code einfügen werden.

app.js

Im nächsten Codeausschnitt verwenden wir das <script>-Tag, um auf die Datei <b>app.js zu verlinken, in die wir den JavaScript-Code schreiben. </script>

Erstellen Sie eine Datei mit dem Namen app.js und fügen Sie den folgenden Code ein -

const data = [
   ['sr. no', 'Name', 'Age', 'Role', 'Company Name'],
   [1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
   [2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
   [3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
   [4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
   [5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
   [6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
   [7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
   [8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
   [9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
   [10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
]
let container = document.querySelector('.container');
let res = new Handsontable(container, {
   data: data,
})

Im obigen app.js-Code erstellen wir als Erstes eine Konstante namens data, in der wir verschiedene Werte speichern, die zu den Daten des von uns erstellten Rasters passen.

Im nächsten Schritt wählen wir ein bestimmtes HTML-Element aus dem querySelector aus und übergeben diesen Wert als ersten Parameter innerhalb des Handsontable-Konstruktors. Der zweite Parameter ist nichts anderes als die tatsächlichen Daten, die wir im div anzeigen möchten.

index.html

Hier ist der vollständige Code mit app.js-Daten. Führen Sie diesen Code aus und prüfen Sie, wie die Ausgabe aussieht -

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Data Grid using handsontable.js</title>
   <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js">
   </script>
   <link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
   <style>
      .heading-div {
         text-align: center;
         margin: 0 auto;
         margin-left: 0;
         max-width: 400px;
      }
   </style>
</head>
<body>
   <div class="heading-div">
      <h1>
         <center>Creating a data-grid!</center>
      </h1>
   </div>
   <div class="container"></div>
   <script>
      const data = [
         ['sr. no', 'Name', 'Age', 'Role', 'Company Name'],
         [1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
         [2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
         [3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
         [4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
         [5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
         [6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
         [7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
         [8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
         [9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
         [10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
      ]
      let container = document.querySelector('.container');
      let res = new Handsontable(container, {
         data: data,
      })
   </script>
</body>
</html>

Einführung von Zeilen- und Spaltenüberschriften

Wir können sogar Kopfzeilen in Zeilen und Spalten einfügen. Dazu fügen Sie einfach zwei Eigenschaften innerhalb des zweiten Parameters der Handsontable-Konstruktormethode hinzu. Betrachten Sie den unten gezeigten Codeausschnitt.

let res = new Handsontable(container, { 
   data: data, 
   rowHeaders: true, 
   colHeaders: true, 
})

Sobald Sie das obige Code-Snippet durch dasjenige ersetzen, das bereits in Ihrer app.js-Datei vorhanden ist, können Sie die den Zeilen und Spalten hinzugefügten Standardüberschriften sehen. p>

rowHeaders haben numerische Werte von 1 bis 9, während Spaltenüberschriften Standardwerte haben, die von A bis zum Ende des Spaltenzeichens beginnen.

In unserem Datenraster stellen wir die Spaltenüberschriften selbst zur Verfügung, dies ist auch in den Daten zu sehen, unsere erste Zeile sieht so aus -

['sr. no', 'Name', 'Age', 'Role', 'Company Name']

Die oben genannten Werte können auch innerhalb von colHeaders bereitgestellt werden. Betrachten Sie den unten gezeigten aktualisierten Codeausschnitt.

let res = new Handsontable(container, {
   data: data,
   rowHeaders: true,
   colHeaders: ['sr. no', 'Name', 'Age', 'Role','Company Name'],
   dropdownMenu: true,
})

Wir müssen auch die Datenkonstanten ändern. Die aktualisierten Datenkonstanten werden unten angezeigt.

const data = [
   [1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
   [2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
   [3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
   [4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
   [5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
   [6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
   [7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
   [8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
   [9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
   [10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
]

Fazit

In diesem Tutorial erklären wir, was handsontable.js ist und wie Sie damit ein Datenraster Ihrer Wahl erstellen. Wir haben verschiedene Beispiele untersucht, in denen wir Standardwerte für Spalten und Überschriften bereitgestellt haben.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit Handsontable.js ein Datenraster in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html npm angular yarn 常量构造函数 JS excel

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie füge ich mit FabricJS Leerzeichen zwischen Zeichen in IText hinzu?Nächster Artikel：Wie füge ich mit FabricJS Leerzeichen zwischen Zeichen in IText hinzu?

In Verbindung stehende Artikel

Mehr sehen