Handsontable 学习

Core

Handsontable类（称为core)允许您使用Handsontable公共API方法修改网格的行为。

调用方法：

// 创建Handsontable实例
const hot = new Handsontable(document.getElementById('example'), options);

// 调用一个方法
hot.setDataAtCell(0, 0, 'new value');

方法

1：addHook

core.addHook（键，回调）

hot.addHook('beforeInit', myCallback);

2：addHookOnce         

core.addHookOnce（键，回调）

触发后，自动被删除。

hot.addHookOnce('beforeInit', myCallback);

3：alter        

core.alter（action，[index]，[amount]，[source]，[keepEmptyRows]）

通过在指定位置添加或删除行和列来更改网格的结构。

//在第10行上方（按visual index），插入1个新行
hot.alter('insert_row_above', 10);

	使用index	没有index
'insert_row_above'	在index上面插入一行	在第一行上面插入一行
'insert_row_below'	在index下面插入一行	在第最后一行下面插入一行
'remove_row'	从index 开始，删除行	从最后一行开始删除行。
'insert_col_start'	在index前插入一列	在第一列前插入一列
'insert_col_end'	在index后插入一列	在最后一列后插入一列
'remove_col'	从index 开始，删除列	从最后一列开始删除列。

// 在第10行上方（按visual index），插入1行
hot.alter('insert_row_above', 10);


// 在第10行下方（按visual index），插入3行
hot.alter('insert_row_below', 10, 3);


// 在LTR布局方向上：在第10列的左侧（按visual index），插入3列
// 在RTL布局方向上：在第10列的右侧（通过visual index），插入3列
hot.alter('insert_col_start', 10, 3);


// 在LTR布局方向上：在第10列的右侧（通过visual index），插入1列
// 在RTL布局方向上：在第10列的左侧（通过visual index），插入1列
hot.alter('insert_col_end', 10);


// 从第10行开始，删除2行(通过 visual index)
hot.alter('remove_row', 10, 2);


// 从第1行开始，删除3行(通过 visual index)
// 从第5行开始，删除2行(通过 visual index)
hot.alter('remove_row', [[1, 3], [5, 2]]);

4：clear         

core.clear（）

清除表中的数据（表设置保持不变）

5：clearUndo

core.clearUndo() ⇒ boolean

6：colToProp

core.colToProp(column) ⇒ string | number

返回与给定列index对应的属性名。如果数据源是数组，则返回列index。

7：countCols

core.countCols() ⇒ number

返回表中可见列的总数。

8：countEmptyCols

core.countEmptyCols([ending]) ⇒ number

返回空列数。如果可选的结束参数为true，将仅统计数据源行末尾的空列。

9：countEmptyRows

core.countEmptyRows([ending]) ⇒ number

返回空行数。如果可选的结束参数为true，返回表底部的空行数。

10：countRenderedCols

core.countRenderedCols() ⇒ number

如果表不可见，则返回-1。

返回呈现列数，包括在表视口外部部分或完全呈现的列。

11：countRenderedRows

core.countRenderedRows() ⇒ number

如果表不可见，则返回-1。

返回呈现的行数，包括在表视口外部分或完全呈现的行。

12：countRows

core.countRows() ⇒ number

返回表中可视行的总数。

13：countSourceCols

core.countSourceCols（）⇒ 数

返回数据源中的列总数。

14：countSourceRows

core.countSourceRows() ⇒ number

返回数据源中的总行数。

15：countVisibleCols

core.countVisibleCols() ⇒ number

返回仅在表视口中可见的呈现列数。不计算部分可见的列。

16：countVisibleRows

core.countVisibleRows() ⇒ number

返回仅在表视口中可见的呈现行数。不计算部分可见的行数。

17：deselectCell

core.deselectCell（）

取消选择表格上的当前单元格选择。

18：destroy

core.destroy()

从DOM中删除表并销毁Handsontable的实例。

19：destroyEditor

core.destroyEditor（[revertOriginal]，[prepareEditorIfNeeded]）

revertOriginal：boolean，true 将恢复以前的值。否则，将保存编辑的值。

prepareEditorIfNeeded：boolean，true 所选单元格下的编辑器将准备打开。

销毁当前编辑器，呈现表并准备新选定单元格的编辑器。

20：emptySelectedCells

core.emptySelectedCells([source])

source：string，标识如何在更改数组中描述此更改的字符串（在afterChange或beforeChange回调中有用）。如果留空，则设置为“编辑”。

清空选定单元格

21：getCell

core.getCell(row, column, [topmost]) ⇒ HTMLTableCellElement | null

topmost：boolean,如果设置为true，它从最顶部的覆盖中返回TD元素。例如，如果想要的单元格位于固定行的范围内，它将从top覆盖

获取单元格，返回TD元素。如果TD没有显示在屏幕上（可能是因为该部分表格不可见），则返回null。

22:getCellEditor

core.getCellEditor(rowOrMeta, column) ⇒ function | boolean

获取单元格编辑器

// 使用`row`和`column`坐标获取单元格编辑器类。
hot.getCellEditor(1, 1);
// 使用单元格元对象获取单元格编辑器类。
hot.getCellEditor(hot.getCellMeta(1, 1));

23:getCellMeta

core.getCellMeta(row, column) ⇒ object

获取使用单元格元对象

Hooks#event:beforeGetCellMeta ,Hooks#event:afterGetCellMeta

24:getCellMetaAtRow

core.getCellMetaAtRow(row) ⇒ Array

返回指定物理行索引的单元格元对象数组。

25:getCellRenderer

core.getCellRenderer(rowOrMeta, column) ⇒ function

获取单元格渲染器

// 使用“row”和“列column坐标获取单元格渲染器。
hot.getCellRenderer(1, 1);
// 使用单元格元对象获取单元格渲染器。
hot.getCellRenderer(hot.getCellMeta(1, 1));

26：getCellsMeta

core.getCellsMeta() ⇒ Array -返回ColumnSettings对象实例的数组。

至少获取一次表中生成的所有单元格元设置（按照单元格初始化的顺序）。

27：getCellValidator

core.getCellValidator(rowOrMeta, column) ⇒ function | RegExp | undefined

// 使用“行”和“列”坐标获取单元格验证器。
hot.getCellValidator(1, 1);
// 使用单元格元对象获取单元格验证器。
hot.getCellValidator(hot.getCellMeta(1, 1));

28：getColHeader

core.getColHeader([column], [headerLevel]) ⇒ Array | string | number

获取列标题的值（如果column headers 为  enabled ).

没有参数,获取包含所有值的数组最底层列标题.

要获取特定列最底部标题的值，请使用column参数

要获取特定列的标题，使用column和 headerLevel参数

headerLevel：标题级索引。接受正值（0到n）和负值（-1到-n）。对于正值，0指向最顶部的页眉。对于负值，-1指向最底部的标头（最靠近单元格的标头）。

// 获取所有最下面的列标题的内容
hot.getColHeader();

// 获取特定列最底部页眉的内容
hot.getColHeader(5);

// 在特定级别获取特定列标题的内容
hot.getColHeader(5, -2);

Hooks#event:modifyColHeader ,Hooks#event:modifyColumnHeaderValue

29：getData

core.getData([row], [column], [row2], [column2]) ⇒ Array

返回当前数据对象（与传递的数据对象相同data配置选项或 loadData（加载数据）方法，除非应用了某些修改（即更改了行/列的顺序，跳过了某些行/列）。如果是这种情况，请使用核心#getSourceData方法）

// 获取所有数据（按其在表中的渲染顺序）。
hot.getData();
// 获取数据片段（从左上角0，0到右下角3，3）。
hot.getData(3, 3);
// 获取数据片段（从左上角2，1到右下角3，3）。
hot.getData(2, 1, 3, 3);

30：getDataAtCell

core.getDataAtCell(row, column) ⇒ *-单元格值数组

注释：如果数据被重新排序、排序或修剪，则将使用当前可见的顺序。

31：getDataAtCol

core.getDataAtCol(column) ⇒ Array-单元格值数组

从数据源返回列值数组。

注释：如果列被重新排序或排序，则将使用当前可见的顺序。

32：getDataAtProp

core.getDataAtProp(prop) ⇒ Array-单元格值数组

给定对象属性名称（例如。'first.name'或 '0')，从表数据中返回列值的数组。也可以提供列索引作为第一个参数。

33：getDataAtRowProp

core.getDataAtRowProp(row, prop) ⇒ *-单元格值

注释：如果数据被重新排序、排序或修剪，则将使用当前可见的顺序。

34：render

core.render()

重新呈现表格。调用此方法将启动重新计算、重新绘制并将更改应用于DOM的过程。渲染表时，将调用所有单元格渲染器。

不建议手动调用此方法。Handsontable试图通过选择其生命周期中最关键的时刻来渲染自己。

35：updateSettings

core.updateSettings(settings, [init])

如果在初始化后需要更改配置，请使用它。

Hooks#event:afterCellMetaReset ,Hooks#event:afterUpdateSettings

hot.updateSettings({
   contextMenu: true,
   colHeaders: true,
   fixedRowsTop: 2
});

36：getValue

core.getValue() ⇒ *-聚焦单元格的值

获取当前焦点单元格的值。

37：toVisualRow / toVisualColumn

core.toVisualRow(row) ⇒ number  /  core.toVisualColumn(column) ⇒ number

将物理 行 / 列 索引转换为可视索引。