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>
在 标记和 标记中，我们从“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在下一个代码片段中，我们使用 标记来链接 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是什么以及如何使用它来创建您选择的数据网格。我们探索了不同的示例，其中我们为列和标题提供了默认值。
以上就是使用 handsontable.js 在 javascript 中创建数据网格的详细内容。