文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

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

PHPz
发布： 2023-09-02 13:01:02
转载
726人浏览过

使用 handsontable.js 在 javascript 中创建数据网格

Handsontable 是一个 JavaScript 库，当我们想要创建数据网格时会使用它。它提供类似电子表格的体验，与 Excel 非常相似。在本教程中，我们将解释如何使用handsontable.js 使用您自己的数据创建数据网格。此外，我们将了解如何使用handsontable.js 中提供的不同选项。

虽然您可能可以使用不同的电子表格（例如网格创建器），但 handsontable.js 从大多数电子表格中脱颖而出，因为它也能够与普通 JavaScript、React 或 Angular 一起使用。

在开始使用handsontable.js 之前，第一步是将其安装在本地计算机上。有不同的方法来安装handsontable.js。

最基本的方法是在 HTML 代码中使用 CDN 链接。我们只需将以下 HTML 代码粘贴到

标记中即可。

立即学习“Java免费学习笔记（深入）”；

<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中文网其它相关文章！

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
相关标签：
JavaScript css html npm angular yarn 常量 构造函数 JS excel
来源：tutorialspoint网
收藏 点赞
上一篇：如何使用 FabricJS 在 IText 中的字符之间添加空格？ 下一篇：使用jQuery 2.0构建Windows Store应用程序
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JS中的async/await怎么用？有什么作用？ async/await是JavaScript中处理异步操作的语法糖，本质是对Promise的封装，使代码更清晰易维护。1.async函数通过自动将返回值包装成Promise来声明异步函数；2.await用于暂停async函数执行，直到Promise被解决，只能在async函数中使用；3.推荐用try/catch捕获错误，并行任务可结合Promise.all使用；4.相比Promise.then()链，async/await结构更清晰、错误处理更直观；5.注意避免滥用await影响性能，调用asy
2025-06-08 23:57:01
777
JS中的setTimeout和setInterval有什么区别？ 在JavaScript中，setTimeout和setInterval看起来都是用来控制代码执行时间的，但它们的行为方式其实完全不同。简单来说：setTimeout是“只执行一次”的定时器。setInterval是“重复执行”的定时器。接下来我们从几个常见使用场景出发，讲讲它们的区别和用法。1.执行次数不同这是两者最根本的区别：setTimeout只会在指定时间后执行一次任务。比如你想等3秒后弹出一个提示框，就可以用它：setTimeout(()=>{alert('3秒到了');
2025-06-08 21:48:01
260
JS中的Reflect对象有什么作用？ Reflect在JavaScript中主要用于统一对象操作接口并增强Proxy的拦截能力，其作用包括：1.替代部分Object方法如Reflect.get/set/deleteProperty实现更友好的对象属性操作；2.与Proxy配合通过对应方法如get/set/has等简化代理逻辑并保留默认行为；3.提供实用工具如Reflect.apply/construct/isExtensible/ownKeys等实现函数调用、阻止扩展、获取键等功能。
2025-06-08 20:39:01
702
JS中的...运算符有什么作用？怎么用？ JavaScript中的...运算符主要有三个用途：1.展开数组或对象元素，用于函数参数传递或合并数组/对象；2.在函数参数中收集剩余参数，形成数组处理任意数量输入；3.在解构赋值中收集剩余部分，便于提取或排除特定数据。例如用[...arr1,...arr2]合并数组，用functionsum(...numbers)处理变参，以及通过[first,...rest]解构获取剩余元素。
2025-06-08 19:51:02
449
JS中的箭头函数和普通函数有什么区别？ 箭头函数与普通函数的关键区别在于this绑定、构造函数能力和arguments对象。1.this指向不同：普通函数的this取决于调用方式，而箭头函数继承外层作用域的this，如在对象方法中使用可能无法访问对象属性；2.箭头函数不能作为构造函数，无法通过new创建实例；3.箭头函数无自己的arguments对象，引用外层函数的arguments，建议改用rest参数替代；适合在无需改变this、非构造函数、不依赖arguments的场景使用，反之则应避免。
2025-06-08 16:51:01
605
JS中的call和apply有什么区别？ call和apply的核心区别在于参数传递方式不同。1.call的参数依次列出，适用于参数固定、明确的场景，如Math.max.call(null,1,2,3)；2.apply的参数为数组或类数组，会自动展开，适合参数为数组的情况，如Math.max.apply(null,[10,20,30])；3.现代可用bind绑定this或扩展运算符替代apply的展开功能，但理解call和apply的本质仍很重要。
2025-06-08 15:30:02
445
JavaScript中的Proxy对象有什么用？ Proxy对象用于拦截和自定义对象操作。1)实现只读对象，阻止属性修改。2)数据验证，确保属性类型正确。3)日志记录，监控属性访问和修改。4)响应式编程，监听属性变化并触发更新。
2025-06-08 15:15:01
691
JS中的JSON.parse和JSON.stringify有什么用？ JSON.parse用于将JSON字符串转为JavaScript对象，而JSON.stringify则用于将对象转为JSON字符串。1.JSON.parse常用于解析接口返回的字符串数据，需确保字符串是合法JSON格式，否则会报错；2.JSON.stringify常用于发送数据到后端或存储到localStorage，但函数、undefined、Symbol类型不会被序列化；3.使用时可结合try-catch避免解析失败导致程序崩溃；4.JSON.stringify支持传入replacer函数进行
2025-06-08 15:09:02
484
JS中的for...of和for...in有什么区别？ for...in遍历对象键，for...of遍历可迭代值。1.for...in用于遍历对象的键名，适用于对象和数组，但遍历数组时可能包含原型链属性，需配合hasOwnProperty使用；2.for...of用于遍历可迭代对象（如数组、字符串、Map等）的值，更直观安全，但不适用于普通对象；3.若需同时获取键和值，可用Object.entries()+for...of；4.根据数据类型选择合适方式：对象用for...in，可迭代结构用for...of。
2025-06-08 14:12:01
769
JS中的Array.isArray怎么用？有什么作用？ Array.isArray()是JavaScript中用于准确判断数组的方法。typeof无法区分数组与对象，而Array.isArray(value)能精准返回布尔值，如Array.isArray([1,2])返回true，Array.isArray({})返回false。实际应用中，它常用于函数参数校验，例如在processItems函数中确保传入数组以避免后续错误。与typeof配合使用时，可先用typeof判断原始值，再用Array.isArray()确认对象是否为数组。此外，该方法被广
2025-06-08 10:18:02
156
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部