首页 >web前端 >js教程 >使用 Handsontable.js 在 JavaScript 中创建数据网格

使用 Handsontable.js 在 JavaScript 中创建数据网格

PHPz转载: 2023-09-02 13:01:02750浏览

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">

在 <script> 标记和 <link> 标记中，我们从“node_modules”文件夹导入相应的“js”和“CSS”文件。现在我们就可以使用handsontable.js了。</script>

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> 标记来链接 <b>app.js 文件，我们将在其中编写 JavaScript 代码。</script>

创建一个名为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 中创建数据网格的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html npm angular yarn 常量构造函数 JS excel

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何使用 FabricJS 在 IText 中的字符之间添加空格？下一篇：使用jQuery 2.0构建Windows Store应用程序

查看更多