资讯专栏INFORMATION COLUMN

handsontable初步认知

wslongchen / 3509人阅读

摘要:待更新左上角单元格赋值问题,通过改源码实现。下拉单元格高度修改,定位元素修改时下拉列表的最后一个显示不全,有。

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的实时保存,草稿箱没用,实时保存,提示已经保存到草稿箱,去草稿箱查看刚刚编辑的内容却不存在,大家注意点。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50404.html

相关文章

  • handsontable初步认知

    摘要:待更新左上角单元格赋值问题,通过改源码实现。下拉单元格高度修改,定位元素修改时下拉列表的最后一个显示不全,有。 hansontable简介 是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。 核心是由原生JavaScript构建,充分模块化,支持自定义build。 除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

    mrcode 评论0 收藏0
  • Handsontable 类似 excel 表格编辑器

    摘要:原文发布于个人博客欢迎访问简介是一个类似表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置核心由原生编写,通过打包同类项目中,点赞最多,列表官网地址支持的特征的一些主要功能这里只列出主要功能,想了解更多更能,可以查询官方文档。这 原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器,支持丰富的展现和交互...

    ztyzz 评论0 收藏0
  • Handsontable 类似 excel 表格编辑器

    摘要:原文发布于个人博客欢迎访问简介是一个类似表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置核心由原生编写,通过打包同类项目中,点赞最多,列表官网地址支持的特征的一些主要功能这里只列出主要功能,想了解更多更能,可以查询官方文档。这 原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器,支持丰富的展现和交互...

    villainhr 评论0 收藏0
  • handsontable自定义渲染

    摘要:在单元格属性配置中调用自定义的渲染方法调用首行渲染方法调用自定义渲染方法或者直接在中调用属性这样就能使用自定义的渲染方法了是元素,是事件名,是事件处理函数。 hansontable的渲染定义方式有多种,常见的有NumericRenderer、TextRenderer、CheckboxRenderer,但他们都是通过registerRenderer来渲染的,registerRendere...

    loonggg 评论0 收藏0
  • js-xlsx + handsontable + echarts实现excel上传编辑然后显示成图表

    摘要:生成报表数据都处理完了之后,就是生成报表了,报表这里稍微做的灵活了一点,是要让用户根据上传的数据,自己选择字段,然后用去生成对应的报表。 js-xlsx + handsontable + echarts 实现在前端导入excel数据并生成echart报表 前言 最近都在做类似 ERP 的项目,所以呢,又碰到一个比较变态的需求(至少对我来说是),在前端导入 excel 文件,然后在浏览器...

    joy968 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<