在现在的项目中，需要可以编辑的表格。要求使用感觉接近于Excel的编辑风格。
- 类似与Excel的编辑风格
- 可复制粘贴单元格
调查了一下常用的插件，感觉handsontable比较好用，并且被几个主流的前段框架（Vue， React，Angular）所采用。
handsontable及使用注意点如下如下：
1.关于handsontable的版本和licence问题。
我们需要的是开源的功能，但是handsontable的7.0版本以后，不支持免费的应用。
handsontable6.2.2 如下：
参照资料： handsontable6.2.2 license
Licensing
Handsontable is an open source library released free under the MIT license.
The MIT license
Handsontable Pro is a fully commercial software distributed and supported by Handsoncode sp. z o.o.
General Software License Terms v4
handsontable7.0.3 的如下：
[参照资料： handsontable7.0.3 license](https://handsontable.com/docs/7.0.3/tutorial-licensing.html
Licensing
Handsontable Non-Commercial License
It allows you to use this software for such non-commercial purposes as, but not limited to, research, private study, and evaluation. Your use in commercial settings is strictly limited to evaluation, development and testing tier of a software deployment architecture. In other words, you can’t enter the production stage if your project is anyhow connected with your commercial activity.
Handsontable Non-Commercial License (v1 released on February 19, 2019)
Handsontable Commercial License
General Software License Terms (v4.1 released on February 19, 2019)
7.0版本以后不支持商业性的免费使用，所以推荐使用6.2.2的MIT license版本。 大家可以去github里下载历史版本。
以下都是handsontable 6.2.2 open source 版本的设置以及实现
2. handsontable的参数
本项目中使用的参数如下：
| NO | 参数 | 表示内容 | Sample | |
|---|---|---|---|---|
| 1 | data | handsontable的数据 | json形式 | |
| 2 | colheader | 表的表头行内容 | json形式； 设置例：[‘列名1’,’列名2’] | |
| 3 | rowHeaders | 行名 | 设置行名 | true：表示1，2…; json形式时表示定义值： 如 [‘行名1’,’行名2’] |
| 4 | manualColumnResize | 表格是否可以调整宽度 | true or false；true的时候，鼠标移动到表头 | |
| 4 | dropdownMenu | 下拉框是否表示 | true or false；true的时候，鼠标移动到表头 |
var employeeTable = new Handsontable(employeeTableDiv, {
data: employeeData,
colHeaders: countHeaderArray,
rowHeaders: false,
filters: false,
dropdownMenu: true,
manualColumnResize: true,
height: 180,
width: '100%',
fixedColumnsLeft: 3,
autoWrapRow: true,
formulas: true,
columns: [
{data: 'deletebutton', width:50, renderer: "html", className: "htCenter",readOnly: true}
,{data: 'div', type:'text', width: 50, className: "htCenter",readOnly: true, renderer: grayBackgroundColorTextRenderer }
,{data: 'cost', width: 120, className: "htRight",readOnly: true, type: 'numeric',numericFormat: {pattern: '0,0.00'}, renderer: grayBackgroundColorNumberRenderer}
,{data: 'peoplecost', width: 100, className: "htRight",readOnly: true, type: 'numeric',numericFormat: {pattern: '0,0.00'}, renderer: grayBackgroundColorNumberRenderer}
]
});
3. handsontable使用注意点
memo：
- 实现表示不下的时候的…效果
- 合并单元格
- 设置cell颜色
- 设置点击事件
Todo：
- 如何保存选择的select的值
- 继续这个博客