Handsontable 构建在线可编辑 Excel 表格 - 文章教程

Handsontable 构建在线可编辑 Excel 表格

发布于 2020-09-18 字数 4550 浏览 1824 评论 0

Handsontable 是一个构建在线可编辑 Excel 表格的 JavaScript 插件,可以搭配 JavaScriptReactAngularVue 使用,当您使用 Handsontable 时,就像在使用 Excel 或 GoogleSheet 一样,用户习惯和操作都非常的便捷。

Handsontable 构建在线可编辑 Excel 表格

对开发人员友好的 api,Handsontable 易于实现,灵活,超级可定制。您可以扩展它与自定义插件,并编辑源代码,以调整它为您的产品。此外您还可以访问一个全面的 API、有用的教程以及社区和商业支持。

设计来执行,您最终可以使用大量的数据,而不必担心性能问题。跨行业的大公司和初创企业使用 Handsontable 来构建对其业务至关重要的应用程序。

安装

使用 NPM 安装最新版本。

npm install handsontable

您可以使用 Yarn,NuGet 或 其他方法,您可以直接从 jsDelivr 直接引入 JS 文件。

创建一个占位符–一个HTML元素,用于保存数据网格的位置。

<div id="example"></div>

导入Handsontable及其样式表。

import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';

或者,您可以简单地将其嵌入到HTML文件中。

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link target="_blank" class="external-link" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

现在,将占位符转换为包含示例数据的数据网格。

const data = [
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
  ['2019', 10, 11, 12, 13],
  ['2020', 20, 11, 14, 13],
  ['2021', 30, 15, 12, 13]
];

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});

特征

列出一些最流行的特性:

  • 多列排序
  • 非连续选择
  • 过滤数据
  • 导出到文件
  • 验证数据
  • 条件格式
  • 合并单元
  • 自定义单元格类型
  • 冻结行/柱
  • 移动行/列
  • 调整行/列的大小
  • 隐藏行/列
  • 上下文菜单
  • 评论意见
  • 自动填充选项

框架支持

使用一个可用的包装器将Handsontable与您最喜欢的框架一起使用:

许可证密钥

许可证密钥是强制性的,因为 Handsontable 7.0.0(2019年3月公布)。

如果您将 Handsontable 用于非用于金钱补偿的目的,例如但不限于教学、学术研究、评估、测试和实验,请传递以下短语:'non-commercial-and-evaluation' 如下所示:

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
});

另一方面,如果在支持商业活动的项目中使用 Handsontable,则必须在 Handsontable.com 获取授权,许可密钥在脱机模式下进行验证。没有连接到任何服务器。点击这里 了解更多 关于它的工作原理。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0