Maison > interface Web > js tutoriel > Créez une grille de données en JavaScript à l'aide de Handsontable.js

Créez une grille de données en JavaScript à l'aide de Handsontable.js

PHPz
Libérer: 2023-09-02 13:01:02
avant
721 Les gens l'ont consulté

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

Handsontable est une bibliothèque JavaScript que nous utilisons lorsque nous voulons créer une grille de données. Il offre une expérience semblable à celle d’une feuille de calcul, très similaire à Excel. Dans ce tutoriel, nous expliquerons comment créer une grille de données avec vos propres données à l'aide de handontable.js. De plus, nous verrons comment utiliser les différentes options disponibles dans handontable.js.

Bien que vous puissiez utiliser différentes feuilles de calcul (telles que Grid Creator), handontable.js se démarque de la plupart des feuilles de calcul car il peut également être utilisé avec du JavaScript simple, React ou Angular.

Avant de commencer à utiliser handontable.js, la première étape consiste à l'installer sur votre ordinateur local. Il existe différentes manières d’installer handontable.js.

La méthode la plus basique consiste à utiliser un lien CDN dans le code HTML. Nous collons simplement le code HTML suivant dans la balise

.
<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>
Copier après la connexion

Dans l'extrait de code ci-dessus, nous importons deux fichiers via CDN. Ce sont "handsontable.full.min.css" qui servira à importer les "styles handsontable" puis on importe "handsontable.full.min.js" qui servira à importer le code JavaScript.

Si vous n'êtes pas intéressé par l'utilisation des liens CDN, vous pouvez les installer à l'aide de npm ou yarn. Envisagez d'utiliser les commandes NPM indiquées ci-dessous. < /p>

npm install handsontable
Copier après la connexion

Utilisez la commande suivante pour Yarn.

yarn add handsontable
Copier après la connexion

Une fois que vous utilisez l'une de ces commandes, vous pouvez simplement ajouter ces deux lignes comme indiqué ci-dessous dans la balise pour commencer à utiliser handsontable.

<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">
Copier après la connexion

Dans la balise

Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal