handsontable初步认知

hansontable简介

是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。

核心是由原生JavaScript构建,充分模块化,支持自定义build。

除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部分功能以插件提供。可以灵活构建插拔,自定义添加新功能插件。

特性

hansontable free版本提供的重要特性有：单元格下拉自动补全、注释信息、右键菜单、复制粘贴、数据校验、合并单元格等等。

兼容性

兼容提醒要求如下:

说明：

• 在ie9上处理大量数据时有限制。
• 有bug存在，有些特性用不了。
• 菜单操作比较卡

简单配置demo体验

http://runjs.cn/detail/foavmqxz

重要概念

• render

Handsontable把表格中cell值的展示和改变cell值的这两个过程分割开了。renderer是负责渲染展示初始配置中的data数据和通过editor修改后的数据。
Renderer是一个简单的函数，得到实际cell的值，然后根据你定义的规则将值转为html code展示出来。

• editor

editor编辑器是用来处理用户输入（鼠标和键盘的事件），校验数据。与起相关的主要就是EditorManager，它有四大功能

1：准备一个适当的editor对于一个激活的active cell
2：准备一个编辑器来展示
3：根据用户的行为展示编辑器
4：关闭编辑器

重要配置项（待更新）

1： render是一个重要配置项，自定义单元格的渲染。

上面遇到的一个问题就是初始实例配置中，设置为Autocomplete类型render，后来被改为Text类型render。但是如果是在某个单元格操作时触发render改变，当前操作的单元格显示会有bug，后来我是换了种方法，获取指定cell class名称，用js直接操作单元格从而修改样式。

2：comment插件，可以自定义添加单元格的提示信息，包括信息内容和展现形式，这个我在做校验然后展示提示信息的时候有用到。

3：contextMenu是右键菜单选项，可以配置或自定义添加。例如下图中清除内容选项就是自定义添加的逻辑而非原生提供配置项。

4：afterChane和afterValidate，用法和区别见下图中的注释，这个两个方法挺重要的。

issue（待更新）

1:左上角单元格赋值问题，通过改源码实现。

2：给autoComplete下拉元素添加悬浮title，其它比如通过点击，悬浮等事件添加title时，titile出现的时机有问题。

3：autoComplete下拉单元格高度修改，css定位元素修改时下拉列表的最后一个显示不全，有bug。

总结

首先说明一下，以上都是依据0.29 version得出的结论。接下来准备补充完善写一些重要配置项和使用过程中自己遇到的问题，关于issue和配置项如果你有更好的想法，欢迎留言交流。

吐槽

sg的实时保存，草稿箱没用，实时保存，提示已经保存到草稿箱，去草稿箱查看刚刚编辑的内容却不存在，大家注意点。