Handsontable 是一个 JavaScript 库，当我们想要创建数据网格时会使用它。它提供类似电子表格的体验，与 Excel 非常相似。在本教程中，我们将解释如何使用handsontable.js 使用您自己的数据创建数据网格。此外，我们将了解如何使用handsontable.js 中提供的不同选项。
虽然您可能可以使用不同的电子表格（例如网格创建器），但 handsontable.js 从大多数电子表格中脱颖而出，因为它也能够与普通 JavaScript、React 或 Angular 一起使用。
在开始使用handsontable.js 之前，第一步是将其安装在本地计算机上。有不同的方法来安装handsontable.js。
最基本的方法是在 HTML 代码中使用 CDN 链接。我们只需将以下 HTML 代码粘贴到
标记中即可。<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 样式”，然后我们导入“handsontable.full.min.js”，用于导入 JavaScript 代码。
如果您对使用 CDN 链接不感兴趣，则可以在 npm 或 yarn 的帮助下安装它们。请考虑使用下面所示的 NPM 命令。
npm install handsontable
对 Yarn 使用以下命令。
yarn add handsontable
一旦您使用这些命令中的任何一个，您只需在
标记中添加如下所示的这两行即可开始使用 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">
在
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
在下一个代码片段中，我们使用
创建一个名为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 文件中已存在的代码片段后，您将能够看到添加到行和列的默认标题。 p>
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是什么以及如何使用它来创建您选择的数据网格。我们探索了不同的示例，其中我们为列和标题提供了默认值。
以上就是使用 Handsontable.js 在 JavaScript 中创建数据网格的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。