
Handsontable是使用Excel一样的外观数据网格组件。建在JavaScript中，它与最高效率的任何数据源的集成。它配备了强大的功能，如数据验证，排序，分组，数据绑定，公式支持或列顺序。
官网主页，给出了一个10万个数据的加载演示，速度那是非常非常快。我测试过最多的数据是10M的CSV数据，忽略网络传输耗时，加载速度也是毫秒级。
HandsonTable是目前为止，本人见过效率最高、功能最强的前端表格处理组件。
简单示例
使用HandsonTable只需要简单的两个步骤：
引入Handsontable 的CSS文件和JS文件。
调用Handsontable代码
<!DOCTYPE html>
<html>
<head>
<title>Handsontable</title>
<script src="/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="/dist/handsontable.full.css" />
</head>
<body>
<div id="example"> </div>
<script>
var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
var container = document.getElementById("example");
var hot = new Handsontable(container, {
data: data
});
</script>
</body>
</html>
常规配置API
1.固定行列位置
| 属性 | 类型 | 含义 |
|---|---|---|
| fixedRowsTop | int | 行数：固定顶部多少行不能垂直滚动 |
| fixedColumnsLeft | int | 列数：固定左侧多少列不能水平滚动 |
var hot = new Handsontable(el,{
data: data,
fixedRowsTop : 1, //固定首行
fixedColumnsLeft : 2 //固定前两列
});
2.拖动行头或列头改变行或列的大小
| 属性 | 类型 | 含义 |
|---|---|---|
| manualRowResize | boolean | 行拖动：当值为true时，允许拖动，当为false时禁止拖动 |
| manualColumnResize | boolean | 列拖动：当值为true时，允许拖动，当为false时禁止拖动 |
var hot = new Handsontable(el,{
data: data,
manualRowResize : true, //允许行拖动
manualColumnResize : false //禁止列拖动
});
3.延伸列的宽度
| 属性 | 类型 | 含义 |
|---|---|---|
| stretchH | string | last：延伸最后一列，all：延伸所有列，none默认不延伸 |
var hot = new Handsontable(el,{
data:data,
stretchH: all //延伸所有列
});
4.手动固定某一列
| 属性 | 类型 | 含义 |
|---|---|---|
| manualColumnFreeze | boolean | 控制菜单是否显示固定选项 |
说明：当值为true时，选中某一列，右键菜单会出现freeze this column选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。
5.拖动行或列到某一行或列之后
| 属性 | 类型 | 含义 |
|---|---|---|
| manualColumnMove | boolean | 当值为true时，列可拖拽移动到指定列 |
| manualRowMove | boolean | 当值为true时，行可拖拽至指定行 |
说明：当属性的值为true时，行头或列头可以被拖拽移动，移动后该行或列将会被移动到指定位置，原先该行或列的后面部分自动上移或后退。移动的时候鼠标需选中行线或列线才行。
6.设置当前行或列的样式
| 属性 | 类型 | 含义 |
|---|---|---|
| currentRowClassName | string | 当前行样式的名称 |
| currentColClassName | string | 当前列样式的名称 |
7.行分组或列分组
| 属性 | 类型 | 含义 |
|---|---|---|
| groups | array | 控制行列分组 |
var hot = new Handsontable(el,{
data:data,
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
});
上面的例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。
8.允许排序
| 属性 | 类型 | 含义 |
|---|---|---|
| columnSorting | boolean/object | 当值为true时，表示启用排序插件 |
当值为true时，排序插件的使用可通过点击列头文字实现。当值为false时表示禁用排序。当值为对象时，该对象包含两个属性：column：列数。sortOrder：true/false，升序或降序，true为升序排列。当用对象启动插件后可用如下方式禁用插件：
hot.updateSettings({
columnSorting:false
});
排序的使用也可已直接调用sort()方法实现。如下操作：
if(hot.sortingEnabled){
hot.sort([行数], true/false);
//true为升序，false为降序
}
9.显示行头列头
| 属性 | 类型 | 含义 |
|---|---|---|
| colHeaders | boolean/array | 当值为true时显示列头，当值为数组时，列头为数组的值 |
| rowHeaders | boolean/array | 当值为true时显示行头，当值为数组时，行头为数组的值 |
10.数据显示
| 属性 | 类型 | 含义 |
|---|---|---|
| data | array | 表格数据 |
| columns | array | 控制表格数据数组中显示的列 |
获取数据的方法：
hot.getData();
加载数据的方法：
hot.loadData(data);
当不需要显示某一列的时候可用如下格式设置：
columns：[
{data:0},
{data:2}
]
//这里就不显示第二列数据，只有第1、3列数据
11.右键菜单显示
| 属性 | 类型 | 含义 |
|---|---|---|
| contextMenu | boolean/array | 控制右键菜单是否显示或显示内容 |
//显示菜单
var hot = new Handsontable(el,{
data:data,
contextMenu:true
});
//显示指定菜单
var hot = new Handsontable(el,{
data: data,
contextMenu: ['row_above', 'row_below', 'remove_row']
});
菜单可选值
官方文档：http://docs.handsontable.com/0.20.2/demo-context-menu.html
12.自适应列大小
| 属性 | 类型 | 含义 |
|---|---|---|
| autoColumnSize | boolean | 当值为true且列宽未设置时，自适应列大小 |
13.表格样式选项
| 属性 | 类型 | 含义 |
|---|---|---|
| width | int | 宽度 |
| height | int | 高度 |