Handsontable1 是一个基于 JavaScript、CSS3 和 HTML5 的数据表格库，支持众多交互功能和特性，如筛选、排序、协调编辑（协同编辑）、拖放、缩放、图表、单元格合并等。它易于使用，并且允许您自定义样式和特定的行为，拥有丰富的事件 API。它被广泛用于许多业务场景中，如数据展示、数据表格的输入和存储、数据的导入和导出等。
安装
我们可以通过如下代码安装：
npm install handsontable@1 --save
使用方法
1. 引入
在你的 HTML 文件头部引入 Handsontable 的 JavaScript 和 CSS 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@1.23.0/dist/handsontable.full.min.css"> <script src="https://cdn.jsdelivr.net/npm/handsontable@1.23.0/dist/handsontable.full.min.js"></script>
或者，你可以将它们下载到你的项目中，引入本地的文件：
<link rel="stylesheet" href="./handsontable.full.min.css"> <script src="./handsontable.full.min.js"></script>
2. 创建 Handsontable
创建 Handsontable 的 DOM，并实例化它：
<div id="example"></div>
-- -------------------- ---- -------
----- --------- - -----------------------------------
----- --- - --- ----------------------- -
----- -
------ ----- -------
--- ----- -------
------ ----- ------
------ ----- -----
--
----------- ----------- ---------- -----------
----------- -------- ------- ------- --------
------------ ----
---在上面的代码中，我们传递了两个参数，第一个参数是 DOM 元素（此处是一个 div），第二个参数是一个数组，其中包含相关配置选项，如数据、列头、行头、上下文菜单等。
在此基础上，我们可以继续调整丰富的设置 API。
3. 事件
可以使用 Handsontable 提供的事件 API 去监听 Handsontable 的事件并采取相应的措施：
hot.addHook('afterChange', function(changes, source) {
console.log('example:', changes, source)
});4. 单元格合并
Handsontable 支持单元格合并，你可以指定某几个单元格来合并为一个大的单元格：
-- -------------------- ---- -------
----- --- - --- ----------------------- -
----- -
------ ----- ------
------ -- ------
------ ----- ------
------ ----- -----
--
------ ------------- ---- -
-- ----- --- - -- --- --- -- --
---- --- - -- --- --- -- --
---- --- - -- --- --- -- --
---- --- - -- --- --- -- --
---- --- - -- --- --- -- --
---- --- - -- --- --- --- -
------ - -------- -- -------- - --
-
--
----------- ----------- ---------- -----------
----------- -------- ------- ------- --------
------------ ----
---5. 过滤与排序
Handsontable 提供了强大的筛选和排序功能，这可以通过设置 filters, columnSorting 和 sortIndicator 等选项来轻松完成：
-- -------------------- ---- -------
----- --- - --- ----------------------- -
----- -
------ ----- -------
--- ----- -------
------ ----- ------
------ ----- -----
--
----------- ----------- ---------- -----------
----------- -------- ------- ------- --------
-------------- -----
-------------- -----
-------- -----
------------ ----
---6. 组件化
如果你已经使用过 React 和 Angular ，你可以试试 Handsontable-React 和 Handsontable-Angular 。
总结
通过学习本文，我们学会了如何使用 Handsontable1 库去创建复杂数据表格，并实现一些高级功能比如单元格合并、排序与筛选。在你的实际项目中，你可以用模块化的方式去搭建自己的数据展示功能，这将让你的团队工作更加高效简明，从而更快速的完成项目的任务。我们总结一下，Handsontable1 库最核心的高级功能：
- 筛选与排序；
- 单元格合并；
- 组件化。
接下来，你可以移步 Handsontable 官网 去学习更多高级内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1b81e8991b448dcb1a