当前位置：极客笔记 > JavaScript > JavaScript 精选笔记 > JavaScript 使用Handsontable.js创建数据网格

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

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

Handsontable是一个JavaScript库，用于创建数据网格。它提供了类似于Excel的电子表格体验。在本教程中，我们将解释如何使用handsontable.js来创建具有自己数据的数据网格。此外，我们还将看到如何使用handsontable.js中的不同选项。

尽管有许多可用的类似网格创建器可以使用，但handsontable.js因其可以与纯JavaScript、React或Angular一起使用的能力而脱颖而出。

在您开始使用handsontable.js之前，第一步是在本地计算机上安装它。有不同的方法来安装handsontable.js。

最基本的方法是在HTML代码中使用CDN链接。我们只需要将以下HTML代码粘贴到我们的<head>标签中，就可以开始了。

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

在上面的代码片段中，我们通过CDN导入了两个文件。这两个文件分别是“handsontable.full.min.css”和“handsontable.full.min.js”，分别用于导入“handsontable样式”和“handsontable.full.min.js”，用于导入JavaScript代码。

如果你对CDN链接不感兴趣，那么你可以在npm或yarn的帮助下安装它们。考虑下面NPM的命令。

npm install handsontable

使用下面的命令来执行Yarn.

yarn add handsontable

一旦你使用了这两个命令中的任何一个，你就可以开始使用**handsontable **了，只需要在<head>标签中添加下面这两行代码。

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

在<script>标签和<link>标签中，我们分别从node_modules文件夹中导入了js和CSS文件。现在我们可以使用handsontable.js了。

index.html

第一步是创建一个HTML文件;将文件命名为index.html。我创建的index.html文件的最终代码如下所示。

示例

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

在上面的HTML代码中，我们使用了两个div类。在第一个中，我们创建了一个标题，在下一个中，我们保持它为空，但是这个空的div有一个名为container的类，我们将在JavaScript代码中使用它。

app.js

在下一个代码片段中，我们将使用<script>标签，我们将在其中链接我们将编写JavaScript代码的app.js文件。

创建一个名为app.js的文件，并粘贴以下代码

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

在上面的app.js代码中，我们做的第一件事是创建一个名为data的常量，在其中存储不同的值，这些值将适合我们创建的数据网格。

下一步，我们从querySelector中选择一个特定的HTML元素，然后我们将该值作为第一个参数传递给Handsontable构造函数。第二个参数是我们想在div中显示的实际数据。

index.html

以下是包含app.js数据的完整代码。运行这段代码并检查输出如何

示例

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

介绍行和列的标题

我们甚至可以为行和列引入表头。为此，只需要在Handsontable构造方法的第二个参数中再添加两个属性。考虑下面的代码片段。

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

一旦你将上面的代码片段替换为app.js文件中已经存在的代码片段，你将能够看到默认标题添加到行和列中。

rowheader的数值从1到9，而列header的默认值从A到列结束的字符。

在我们的数据网格中，我们自己提供了列标题，这也可以在数据中看到，我们有第一行 −

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

上面的值也可以在colHeaders中提供。考虑下面更新后的代码片段。

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

我们还需要修改data常量。更新后的数据常量如下所示。

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

结论

在本教程中，我们解释了什么是handsontable.js，以及如何使用它来创建你选择的数据网格。我们探索了为列和标题提供默认值的不同示例。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程