数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究使用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.cn/npm/[email protected]/dist/handsontable.full.min.css" rel="stylesheet" media="screen"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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，只需在<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.cn/npm/[email protected]/dist/handsontable.full.min.js"> </script> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/handsontable.full.min.js"> </script> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/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,
})
我们还需要更改我们的data常量。更新后的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是什么，以及如何使用它来创建您选择的数据网格。我们探讨了不同的示例，在这些示例中，我们为列和标题都提供了默认值。
506 次查看
