hansontable是一款在线类Excel表格编辑器,支持丰富的展示和交互,有多种单元格类型可供配置。核心是用原生JavaScript构建的,完全模块化,并支持自定义构建。除了核心的表格渲染(本质上是js操作表格,元素位置计算,自定义绑定事件处理),大部分功能都是由插件提供的。可灵活构建和插件化,可自定义添加新功能插件。Featureshansontable免费版提供的重要功能有:单元格下拉自动补全、注释信息、右键菜单、复制粘贴、数据校验、合并单元格等兼容性兼容性提示要求如下:说明:ie9处理大量数据时有限制。存在错误,某些功能无法使用。简单配置demo体验http://runjs.cn/detail/foavmqxz重要概念renderHandsontable将表格中显示单元格值和改变单元格值两个过程分开。渲染器负责渲染显示初始配置中的数据和编辑器修改后的数据。Renderer是一个简单的函数,获取实际单元格的值,然后将值按照你定义的规则转换成html代码进行显示。编辑器编辑器用于处理用户输入(鼠标和键盘事件)和验证数据。与之相关的主要是EditorManager,它有四大功能:1:为激活的activecell准备一个合适的编辑器2:准备一个编辑器来显示3:根据用户的行为显示编辑器4:关闭重要配置editorItem(待更新)1:render是自定义cell渲染的重要配置项。上面遇到的一个问题是在最初的实例配置中,设置为Autocompletetyperender,后来改为Texttyperender。但是如果在操作某个cell时触发了renderchange,那么当前操作的cell的显示就会有bug。后来改了获取指定cell类名的方法,用js直接操作cell修改样式。2:评论插件可以自定义添加单元格的提示信息,包括信息内容和显示形式。这个在我做验证然后显示提示信息的时候很有用。3:contextMenu是一个右键菜单选项,可以配置或自定义。比如下图中的clearcontent选项是自定义添加的逻辑,而不是原生提供的配置项。4:AfterChane和afterValidate,用法和区别见下图注释。这两个方法非常重要。issue(待更新)1:左上角单元格分配问题,改源码实现。2:给autoComplete下拉元素添加浮动标题。通过点击、悬停等其他事件添加标题时,标题的时序有问题。3:修改autoComplete下拉单元格高度,修改css定位元素时下拉列表最后一个显示不全,有bug。总结首先说明一下,以上结论是基于0.29版本得出的。接下来,我将对一些重要的配置项和我在使用过程中遇到的问题进行补充和完善。如果大家对问题和配置项有更好的想法,欢迎留言交流。吐槽sg的实时保存,草稿箱没用,实时保存,提示已保存到草稿箱,去草稿箱查看刚刚编辑的内容不存在,大家付费注意力。
