handsontable整理

Posted cosyer的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了handsontable整理相关的知识,希望对你有一定的参考价值。

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):使用验证器验证所有单元格

以上是关于handsontable整理的主要内容,如果未能解决你的问题,请参考以下文章

初识Handsontable

Handsontable 中的 Handsontable 下拉高度调整

从 CSV 导入到 HandsOnTable 并从 HandsOnTable 导出到 CSV

Handsontable 无法正确渲染?

Handsontable 中更新内容数据的问题

像性能一样复制 Google 表格(handsontable)