简介:
这个是一个 handsontable.js 的免费版本使用范例
希望会对有需要的人提供到帮助
-
范例中包含有我使用到的一些功能的实作.
-
以及在 vue 的框架下如何去使用 handsontable 的一些 api
-
其中需要特别注意的一点,官网的范例所使用的 css 需要单独放置到实例所在的目录,并不能直接按官网所写的执行.
-
并且官网范例中貌似没有强调的一点是,我们需要给所谓的 key -> licenseKey=“non-commercial-and-evaluation” 将其放在中即可,或者放置在 settings 中
实现功能
- 通过修改 main.js 中的 Vue.prototype.$api,得到后端的资料,将资料呈现在网页上
- 实现了分页切换的操作,单页呈现33笔资料
- 使用者可以输入公式,通过解析后,由后端 SQL 执行,并将结果由前端呈现(需要后端程式码),公式可直接 enter 执行
- 实现了资料由表格到热力图的切换(通过公式边上的button)
- 修改了右键菜单(包含):
- sort: 由右键选单点选执行 SQL 端的排序,并将结果及时呈现到前端(handsontable 的局部排序代码也有在 code 中)
- delete: 由右键选单点选执行删除栏位的操作,直接反应到 SQL 端,并将结果及时呈现到前端
- 代码说明均在都在 code 的备注中。
Project setup (这里只包含前端代码,并不包含后端程式)
npm install
Compiles and hot-reloads for development
npm run serve
## 结果截图