hansontable简介
hansontable是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。
核心是由原生JavaScript构建,充分模块化,支持自定义build。
除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部分功能以插件提供。可以灵活构建插拔,自定义添加新功能插件。
github:https://github.com/handsontable/handsontable
- 特性
hansontable free版本提供的重要特性有：单元格下拉自动补全、注释信息、右键菜单、复制粘贴、数据校验、合并单元格等等。
1.固定行列位置
fixedRowsTop:行数 //固定顶部多少行不能垂直滚动
fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动
2.拖拽行头或列头改变行或列的大小
manualColumnResize:true/false//当值为true时，允许拖动，当为false时禁止拖动
manualRowResize:true/false//当值为true时，允许拖动，当为false时禁止拖动
3.显示行头列头
colHeaders:true/fals/数组 //当值为true时显示列头，当值为数组时，列头为数组的值
rowHeaders：true/false/数组 //当值为true时显示行头，当值为数组时，行头为数组的值
4.右键菜单展示
contextMenu：true/false/自定义数组 //当值为true时，启用右键菜单，为false时禁用
5.自适应列大小
autoColumnSize：true/false //当值为true且列宽未设置时，自适应列大小
6.minCols：最小列数
minRows：最小行数
minSpareCols：最小列空间，不足则添加空列
maxCols：最大列数
maxRows：最大行数
minSpareRows：最小行空间，不足则添加空行
固定行列位置
fixedRowsTop:行数 //固定顶部多少行不能垂直滚动
fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动
7.允许排序
columnSorting：true/false/对象 //当值为true时，表示启用排序插件
hot.updateSettings({
columnSorting:false
});
排序的使用也可已直接调用sort()方法实现。如下操作：
if(hot.sortingEnabled){
hot.sort(行数，true/false); //true为升序，false为降序
}
8.延伸列的宽度
stretchH：last/all/none //last:延伸最后一列,all:延伸所有列,none默认不延伸。
9.手动固定某一列
manualColumnFreeze: true/false
//当值为true时，选中某一列，右键菜单会出现freeze this column选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。
10.设置当前行或列的样式
currentRowClassName：当前行样式的名称
currentColClassName：当前列样式的名称
11.行分组或列分组
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
上面的例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。
12.自适应列大小
autoColumnSize：true/false //当值为true且列宽未设置时，自适应列大小
colWidths:[列宽1，列宽2，...]/列宽值
13.observeChanges：true/false //当值为true时，启用observeChanges插件
14.自定义边框设置，可以进行初始化配置，如下：
customBorders:[{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]
15.单元格合并可以进行初始化配置
mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...]，也可以先声明单元格允许合并，mergeCells:true，再利用合并方法操作。
16.data
(1)数组
data:[
["2015", "鄂Q2DY79", 50, 30, 4],
["2016", "冀D98998", 45, 56, 3],
["2017", "豫J63569", 30, 34, 3],
["2018", "京AF2336", 28, 32, 3],
["2019", "京AF2332", 60, 12, 2],
["2020", "渝A00001", 36, 13, 1],
["2021", "渝A00002", 33, 34, 1],
["2022", "渝A00003", 30, 23, 3],
["2023", "渝A00004", 45, 12, 4],
["2024", "渝A00005", 70, 22,6],
(2)对象
objectData:[
{year:"2015", car_no:"鄂Q2DY79", detail:50, "money":30, "judge":4},
{year:"2016", car_no:"冀D98998", detail:45, "money":56, "judge":3},
{year:"2017", car_no:"豫J63569", detail:30, "money":34, "judge":3},
{year:"2018", car_no:"京AF2336", detail:28, "money":32, "judge":3},
{year:"2019", car_no:"京AF2332", detail:60, "money":12, "judge":2},
{year:"2020", car_no:"渝A00001", detail:36, "money":13, "judge":1},
{year:"2021", car_no:"渝A00002", detail:33, "money":34, "judge":1},
{year:"2022", car_no:"渝A00003", detail:30, "money":23, "judge":3},
{year:"2023", car_no:"渝A00004", detail:45, "money":12, "judge":4},
{year:"2024", car_no:"渝A00005", detail:70, "money":22, "judge":6}
]
(3)column
columns: function(column) {
var columnMeta = {};
if (column === 0) {
columnMeta.data = 'id';
} else if (column === 1) {
columnMeta.data = 'name.first';
} else if (column === 2) {
columnMeta.data = 'name.last';
} else if (column === 3) {
columnMeta.data = 'address';
} else {
columnMeta = null;
}
return columnMeta;
},
方法
1.为handsontable添加钩子方法
addHook(key,callback):key为钩子方法名
addHookOnce(key,callback)：添加只使用一次的方法，用完后自动删除
2.添加行或列，删除行或列
alter(action,index,amount,source,keepEmptyRows)
action:有4个值insert_row，insert_col，remove_row，remove_col
index：行索引，当存在时在索引处插入或删除，不存在时在当前行后插入
amount：默认值为1
source：行或列对象
keepEmptyRows：true/false，当值为true时，空行不被删除。
3.clear():清空表格数据
4.colOffset():获取可见的第一列的索引值
5.colToProp(col):返回给定索引列的列名，col为列索引
6.countCols():统计表格的所有列总数并返回
countRows():统计表格的总行数，并返回
7.countEmptyCols(ending)：当ending的值为true时，统计所有空列的总数，返回总数显示再最右侧
countEmptyRows(ending):当ending的值为1时，统计所有空行总数，返回总数显示在最下方
8.countRenderedCols():统计并返回被渲染的列数
countRenderedRows():统计并返回被渲染的行数
9.countVisibleCols():统计并返回可见的列数，当返回-1时，表格不可见
countVisibleRows():统计并返回可见的行数，当返回-1时，表格不可见
10.deselectCell():取消当前被选中的单元格
11.destory():移除dom对象中的表格
12.destoryEditor(reverOriginal)
去除当前编辑器，并选中当前单元格，渲染上该效果。如果reverOriginal不是true则被编辑的数据将被保存，如果为true，则会恢复之前的数据，不保存新的数据到单元格。
13.getActiveEditor():返回一个活跃的编辑对象。
14.getCell(row.col,topmost):根据行列索引，获取一个被渲染的单元格，如果该单元格未被渲染则返回null
其中，row,col分别为行索引和列索引，topmost为表示是否是最上层，其值为true/false
15.getCellEditor():获取单元格的编辑器
16.getCellMeta(row,col):根据行列索引获取单元格的属性对象
17.getCellRenderer(row,col)：根据单元格的行列索引获取单元格的渲染函数
18.getCellValidator()：获取单元格的校验器
19.getColHeader(col):根据列索引获取列头名称
getRowHeader(row):根据行索引获取行头名称
20.getColWidth(col):根据列索引获取列宽
getRowHeight(row):根据行索引获取行高
21.getCoords(elem):获取元素的坐标
22.getCopyableData(startRow,startCol,endRow,endCol):获取指定范围的单元格数据
23.getData(row1,col1,row2,col2):获取指定范围的单元格的数据
24.getDataAtCell(row,col):根据行列索引获取单元格的值
25.getDataAtCol(col)：根据列索引获取一列的数据
getDataAtRow(row)：根据行索引获取一行的数据
26.getDataAtProp(prop):根据对象属性名获取相应的列的数据,prop为属性名
27.getDataAtRowProp(row,prop):根据行索引返回指定属性名的值
28.getInstance():获取一个handsontable实例
29.getPlugin(pluginName):根据插件名称获取一个插件实例
30.getSelected():获取被选中的单元格的索引数组，数组包括：startRow，stratCol，endRow，endCol4个值。
31.getSelectedRange():获取被选中的单元格的坐标
32.getSettings():获取对象的配置信息
33.getSourceDataAtCol(col):根据列号获取data source中的该列数据
getSourceDataAtRow(row):根据行号获取data source中的该行数据
34.getValue():获取所有被选中的单元格的值
35.hasColHeaders():返回是否存在列头
hasRowHeaders():返回是否存在行头
36.isEmptyCol(col):根据列索引判断该列是否为空
isEmptyRow(row):根据行索引判断该行是否为空
37.isListening():判断当前handsontable实例是否被监听
listen():监听body中的input框
unlisten():停止监听
38.loadData(data)：加载本地数据
39.populateFormArray(start,input,end,source,method,direction,deltas):使用二维数组填充单元格
其中，start:开始位置
input：二维数组
end：结束位置
source：默认为populateFromArray
method：默认为overwrite
direction：left/right/top/bottom
deltas:其值为一个数组
populateFormArray(row,col,input,endRow,,endCol,source,method,direction,deltas)
40.propToCol(prop):返回给定属性名的列索引，prop为属性名
propToRow(prop):返回给定属性名的行索引，prop为属性名
41.removeCellMeta(row,col,key):根据行列索引移除指定的属性对象
42.removeHook(key,callback):移除钩子方法
43.render():渲染表格
44.rowOffset():获取第一个可见行的索引
45.setCellMeta(row,col,key,val)：设置参数属性和值到指定行列的单元格
46.setCellMetaObject(row,col,prop):设置属性对象到指定的单元格
47.setDataAtCell(row,col,value,source)：设置新值到一个单元格
48.setDataAtRowProp(row,prop,value,source):设置指定行的属性值为指定的值
49.updateSettings(setting,init)：修改初始化的配置信息
50.validdateCells(callback):使用验证器验证所有单元格