使用 Handsontable.js 在 JavaScript 中创建数据网格
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 样式"，然后我们导入用于导入 JavaScript 代码的"handsontable.full.min.js"。
如果您不想使用 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> 标记，在其中链接 app.js 文件，我们将在其中编写 JavaScript 代码。
创建一个名为 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 文件中已有的代码片段后，您将能够看到添加到行和列的默认标题。
rowHeaders 的数值从 1 到 9，而列标题的默认值从 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,
})
我们还需要更改数据常量。更新后的数据常量如下所示。
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 是什么以及如何使用它来创建您选择的数据网格。我们探索了不同的示例，其中我们为列和标题提供了默认值。
