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

PHPzavant: 2023-09-02 13:01:02754parcourir

使用 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>

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.

npm install handsontable

Utilisez la commande suivante pour Yarn.

yarn add handsontable

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">

Dans la balise <script> et la balise <link>, nous importons les fichiers "js" et "CSS" correspondants depuis le dossier "node_modules". Nous pouvons maintenant utiliser handontable.js. </script>

index.html

La première étape consiste à créer un fichier HTML ; nommez le fichier index.html. Le code final du fichier index.html que j'ai créé ressemble à ceci.

Exemple

<!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>

Dans le code HTML ci-dessus, nous avons utilisé deux classes div. Dans le premier nous créons un en-tête, dans le suivant nous le laissons vide, mais ce div vide a une classe appelée container que nous ajouterons dans notre code JavaScript.

app.js

Dans l'extrait de code suivant, nous utilisons la balise <script> pour créer un lien vers le fichier <b>app.js où nous écrirons le code JavaScript. </script>

Créez un fichier appelé app.js et collez le code suivant -

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,
})

Dans le code app.js ci-dessus, la première chose que nous faisons est de créer une constante appelée data où nous stockons différentes valeurs qui correspondent aux données de la grille que nous créons.

Dans l'étape suivante, nous sélectionnons un élément HTML spécifique dans le querySelector et transmettons cette valeur comme premier paramètre dans le constructeur Handsontable. Le deuxième paramètre n’est rien d’autre que les données réelles que nous souhaitons afficher dans le div.

index.html

Voici le code complet avec les données app.js. Exécutez ce code et vérifiez comment la sortie apparaît -

Exemple

<!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>

Présentation des en-têtes de lignes et de colonnes

Nous pouvons même introduire des en-têtes dans les lignes et les colonnes. Pour ce faire, ajoutez simplement deux propriétés dans le deuxième paramètre de la méthode constructeur Handsontable. Considérez l'extrait de code présenté ci-dessous.

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

Une fois que vous aurez remplacé l'extrait de code ci-dessus par celui qui existe déjà dans votre fichier app.js, vous pourrez voir les en-têtes par défaut ajoutés aux lignes et aux colonnes. p>

rowHeaders auront des valeurs numériques allant de 1 à 9, tandis que les en-têtes de colonnes auront des valeurs par défaut commençant de A jusqu'à la fin du caractère de la colonne.

Dans notre grille de données, nous fournissons nous-mêmes les en-têtes de colonnes, cela peut également être vu dans les données, notre première ligne ressemble à ceci -

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

Les valeurs ci-dessus peuvent également être fournies dans colHeaders. Considérez l'extrait de code mis à jour présenté ci-dessous.

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

Nous devons également modifier les constantes des données. Les constantes de données mises à jour sont présentées ci-dessous.

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'],
]

Conclusion

Dans ce tutoriel, nous expliquons ce qu'est handontable.js et comment l'utiliser pour créer une grille de données de votre choix. Nous avons exploré différents exemples dans lesquels nous avons fourni des valeurs par défaut pour les colonnes et les en-têtes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment ajouter des espaces entre les caractères dans IText à l'aide de FabricJS ?Article suivant：Comment ajouter des espaces entre les caractères dans IText à l'aide de FabricJS ?

Articles Liés

Voir plus