handsontable开端认知

hansontable简介

是一个在线相似Excel的表格编辑器,支撑雄厚的展现和交互,有多样的单元格范例供设置。

中心是由原生JavaScript构建,充足模块化,支撑自定义build。

除了中心表格衬着(本质就是js操纵table,盘算元素位置,自定义绑定事宜处置惩罚),大部分功用以插件供应。能够天真构建插拔,自定义增加新功用插件。

特征

hansontable free版本供应的重要特征有:单元格下拉自动补全、解释信息、右键菜单、复制粘贴、数据校验、兼并单元格等等。

兼容性

兼容提醒请求以下:

《handsontable开端认知》

申明:

  • 在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是一个重要设置项,自定义单元格的衬着。

《handsontable开端认知》

《handsontable开端认知》

上面碰到的一个题目就是初始实例设置中,设置为Autocomplete范例render,厥后被改成Text范例render。然则假如是在某个单元格操纵时触发render转变,当前操纵的单元格显现会有bug,厥后我是换了种方法,猎取指定cell class称号,用js直接操纵单元格从而修正款式。

2:comment插件,能够自定义增加单元格的提醒信息,包含信息内容和展现情势,这个我在做校验然后展现提醒信息的时刻有用到。

《handsontable开端认知》

3:contextMenu是右键菜单选项,能够设置或自定义增加。例以下图中消灭内容选项就是自定义增加的逻辑而非原生供应设置项。

《handsontable开端认知》

4:afterChane和afterValidate,用法和区分见下图中的解释,这个两个方法挺重要的。

《handsontable开端认知》

issue(待更新)

1:左上角单元格赋值题目,经由过程改源码完成。

《handsontable开端认知》

2:给autoComplete下拉元素增加悬浮title,别的比方经由过程点击,悬浮等事宜增加title时,titile涌现的机遇有题目。

《handsontable开端认知》

3:autoComplete下拉单元格高度修正,css定位元素修正时下拉列表的末了一个显现不全,有bug。

《handsontable开端认知》

总结

起首申明一下,以上都是根据0.29 version得出的结论。接下来预备补充完美写一些重要设置项和使用历程中本身碰到的题目,关于issue和设置项假如你有更好的主意,迎接留言交换。

吐槽

sg的及时保留,草稿箱没用,及时保留,提醒已保留到草稿箱,去草稿箱检察方才编辑的内容却不存在,人人注重点。

    原文作者:jsdt
    原文地址: https://segmentfault.com/a/1190000008318903
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞