Handsontable属性、常用配置汇总

代码

<!-- 提前设置表格宽高, 并设置overflow:hidden -->
<div id="Handsontable-box" style="width:100%;height:300px;overflow:hidden"></div>

// 模拟数据 100行 50列
var myData = Handsontable.helper.createSpreadsheetData(100, 50),
  container = document.getElementById('Handsontable-box'),
  hot;
 
hot = new Handsontable(container, {
  data: myData, // 数据
  colWidths: 100, // 列宽
  readOnly: false, // 表格只读关闭 
  rowHeaders: true, // 显示行头
  colHeaders: true, // 显示列头
  fixedRowsTop: 2, // 固定顶部2行
  fixedColumnsLeft: 2, // 固定左侧2列
  columnSorting: true, // 列排序
  sortIndicator: true, // 显示列排序箭头
  manualRowResize: true, // 行高调整
  manualColumnResize: true, // 列宽调整
  manualRowMove: true, // 行移动
  manualColumnMove: true, // 列移动
});  

常规设置

1. 冻结行列
   fixedRowsTop　冻结行（固定顶部开始算起指定行不随垂直滚动条滚动
   fixedColumnsLeft　冻结列（固定右边开始算起指定行不随水平滚动条滚动）
2. 显示表头
   colHeaders:true　显示列表头， 默认false， 可取 true/false/数组 ，当值为数组时，列头为数组的值
   rowHeaders:true　显示行表头， 默认 false， 可取 true/false/数组，当值为数组时，行头为数组的值
3. 允许通过拖曳行表头/列表头来改变行列的大小
   manualColumnResize:true 允许拖曳列表头，默认为false
   manualRowResize:true 允许拖曳行表头，默认为false
4. 显示表头下拉菜单 (右键可用，默认为undefined)
   contextMenu:true 显示表头的下拉菜单默认false 可取 true/false/自定义数组
5. 手动设置冻结列(冻结的列会前置)
   manualColumnFreeze:true 设置true后在单元格中右击出现一个菜单，此菜单会多出一个“Unfteeze this columu”的选项，再次点击就会取消冻结动作。 默认为false
6. 给当前行/列的一个样式名
   currentRowClassName:“cur” 给当前行设置样式名（鼠标点击某个单元格，则整行给样式）
   currentColClassName:“cur” 给当前行列设置样式名（鼠标点击某个单元格，则整行给样式）
7. 排序
   当值为true时，表示启用排序插件
   当值为true时，排序插件的使用可通过点击列头文字实现。
   当值为false时表示禁用排序。当值为对象时，
   该对象包含两个属性：column：列数。
   sortOrder：true/false，升序或降序，true为升序排列。
   当用对象启动插件后可用如下方式禁用插件：
   hot.updateSettings({
   columnSorting:false
   });
   排序的使用也可已直接调用sort()方法实现。如下操作：
   if(hot.sortingEnabled){
   hot.sort(行数，true/false);
   // true为升序，false为降序
   }
8. 启用observeChanges插件
   observeChanges：true/false //当值为true时，启用observeChanges插件
9. 设置列宽

// as numeric, for each column.
colWidths: 100,
// as string, for each column.
colWidths: '100px',
// as array, based on visual indexes. The rest of the columns have a default width.
colWidths: [100, 120, 90],
// as function, based on visual indexes.
colWidths: function(index) {
  return index * 10;
},

10. 设置行高

// as numeric, for each row.
rowHeights: 100,
// as string, for each row.
rowHeights: '100px',
// as array, based on visual indexes. The rest of the rows have a default height.
rowHeights: [100, 120, 90],
// as function, based on visual indexes.
rowHeights: function(index) {
  return index * 10;
},

11. 延伸列的宽度
    stretchH:‘last’ 可取 last/all/none last：延伸最后一列，all：延伸所有列，none默认不延伸。
12. 行分组或列分组
    groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}] 例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。
13. 拖动行或列到某一行或列之后
    manualColumnMove：true/false 当值为true时，列可拖拽移动到指定列
    manualRowMove:true/false当值为true时，行可拖拽至指定行
14. 合并的列

mergeCells: [
  //{ row: 0, col: 0, rowspan: 2, colspan: 2 },
  { row: 2, col: 0, rowspan: 19, colspan: 1 },
  { row: 0, col: 2, rowspan: 1, colspan: 9 }
],

manualRowMove:true/false当值为true时，行可拖拽至指定行
15. 编辑锁
columns:[{readOnly:true},{readOnly:true}]
16. 其他
minCols：最小列数
minRows：最小行数
minSpareCols：添加空列
maxCols：最大列数
maxRows：最大行数
minSpareRows：添加空行

方法

对象.方法（参数）
例：hot.alter(‘insert_row’,0,2,’’,true);
1：添加行或列，删除行或列
alter (action,index,amount,source,keepEmptyRows)
action:有4个值insert_row，insert_col，remove_row，remove_col
index：行索引，当存在时在索引处插入或删除，不存在时在当前行后插入
amount：默认值为1表示插入多少行/列
source：行或列对象
keepEmptyRows：true/false，当值为true时，空行不被删除。
2：清空表数据
clear()
3：统计表格的所有列总数并返回
countRows():统计表格的总行数，并返回
console.log(hot.countCols())
4：取消当前被选中的单元格
deselectCell()
5：移除dom对象中的表格
destory()
6：去除当前编辑器，并选中当前单元格，渲染上该效果
destoryEditor(reverOriginal)
去除当前编辑器，并选中当前单元格，渲染上该效果。如果reverOriginal不是true则被编辑的数据将被保存，如果为true，则会恢复之前的数据，不保存新的数据到单元格。
7：返回一个活跃的编辑对象。
getActiveEditor()
8：根据行列索引获取单元格的值
getCopyableData(startRow,startCol,endRow,endCol)
9.为handsontable添加钩子方法
addHook(key,callback):key为钩子方法名
例如：hot.addHook(‘beforeInit’, myCallback)
addHookOnce(key,callback)：添加只使用一次的方法，用完后自动删除
例如：hot.addHookOnce(‘beforeInit’, myCallback)
10.获取可见的第一列的索引值
colOffset()
11.返回给定索引列的列名，col为列索引
colToProp(col)
12.countEmptyCols(ending)：当ending的值为true时，统计所有空列的总数，返回总数显示再最右侧
countEmptyRows(ending):当ending的值为1时，统计所有空行总数，返回总数显示在最下方
13.countRenderedCols():统计并返回被渲染的列数
countRenderedRows():统计并返回被渲染的行数
14.countVisibleCols():统计并返回可见的列数，当返回-1时，表格不可见
countVisibleRows():统计并返回可见的行数，当返回-1时，表格不可见
15.deselectCell():取消当前被选中的单元格
16.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):使用验证器验证所有单元格