Handsontable 是一个 JavaScript 库，当我们想要创建数据网格时会使用它。它提供类似电子表格的体验，与 Excel 非常相似。在本教程中，我们将解释如何使用handsontable.js 使用您自己的数据创建数据网格。此外，我们将了解如何使用handsontable.js 中提供的不同选项。
虽然您可能可以使用不同的电子表格（例如网格创建器），但 handsontable.js 从大多数电子表格中脱颖而出，因为它也能够与普通 JavaScript、React 或 Angular 一起使用。
在开始使用handsontable.js 之前，第一步是将其安装在本地计算机上。有不同的方法来安装handsontable.js。
最基本的方法是在 HTML 代码中使用 CDN 链接。我们只需将以下 HTML 代码粘贴到
标记中即可。立即学习“Java免费学习笔记（深入）”；
在上面的代码片段中，我们通过 CDN 导入两个文件。这些是“handsontable.full.min.css”，将用于导入“handsontable 样式”，然后我们导入“handsontable.full.min.js”，用于导入 JavaScript 代码。
如果您对使用 CDN 链接不感兴趣，则可以在 npm 或 yarn 的帮助下安装它们。请考虑使用下面所示的 NPM 命令。
npm install handsontable
对 Yarn 使用以下命令。
yarn add handsontable
一旦您使用这些命令中的任何一个，您只需在
标记中添加如下所示的这两行即可开始使用 handsontable。在
index.html
第一步是创建一个 HTML 文件；将文件命名为 index.html。 我创建的 index.html 文件的最终代码如下所示。
示例
Data Grid using handsontable.js
Creating a data-grid!
在上面的 HTML 代码中，我们使用了两个 div 类。在第一个中，我们创建一个标头，在下一个中，我们将其保留为空，但是该空 div 有一个名为 container 的类，我们将在我们的 JavaScript 代码。
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
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 数据的完整代码。运行此代码并检查输出如何显示 -
示例
Data Grid using handsontable.js
Creating a data-grid!
引入行和列标题
我们甚至可以向行和列引入标题。为此，您只需在 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是什么以及如何使用它来创建您选择的数据网格。我们探索了不同的示例，其中我们为列和标题提供了默认值。
