前端开发:一款快速、安全、可靠的电子表格组件(Handsontable)

众鑫娱乐

2018-02-28 19:25:36

Handsontable Community Edition (CE) 是一个开源的JavaScript电子表格组件,非常流行的web应用程序的UI组件,可用于 各种技术,如React、Angular和Vue,它很容易与任何数据源集成并提供了各种有用的功能,如数据绑定、验证、排序和强大的上下文菜单,它可以处理大量数据而无需担心性能问题,兼容所有现代浏览器和IE9 。

1、下载及初始化

class="large" data-loadfunc=0 src="https://t12.baidu.com/it/u=4015510898,2667326440&fm=173&w=607&h=44&img.JPEG" data-loaded=0>

在页面body中新增一个空的div元素,并设置id属性。

最后,运行如下脚本,简单的初始化就完成了。

npm安装命令:npm install handsontable

bower安装命令:bower install handsontable

除此之外还有yarn、amd、nuget、jspm安装方式

2、功能展示

①上下文菜单

可以进行复制、剪切、粘贴、插入行、移除行等操作。

②单元格类型

单元格中值得类型,有文本、数字、复选框、日期时间选择器、自动补全等。

③单元格渲染HTML

④格式化数据

负数为红色,正数为黑色,空背景为灰色等。

⑤分页

⑥合并单元格

⑦数据备注

⑧查询

匹配数据高亮显示。

⑨选择突出显示

选中单元格行、列突出显示。

⑩排序

点击表头降序、升序排序。

官方网站: