Handsontable实例的核心方法

不念不忘少年蓝@ 2021-11-23 12:04 976阅读 0赞

转载：[https://blog.csdn.net/qianqianyixiao1/article/details/81507257][https_blog.csdn.net_qianqianyixiao1_article_details_81507257]

**addHook：**为Handsontable添加事件侦听器

hot.addHook('afterChange', function(changes) {
    	changes.forEach(([row, prop, oldValue, newValue]) => {
    		console.log('afterChange');
    	});
    });

**addHookOnce：**为Handsontable实例添加一次性事件侦听器

hot.addHookOnce('afterSelection', function(row, column, row2, column2, preventScrolling, selectionLayerLevel) {
    	console.log('afterSelection');
    });

**alter：**通过插入/删除行或列来更改表结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

hot.alter('insert_row', 3);

在第三行后插入一行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1][]

// 在第4列之前插入3个新列.
    hot.alter('insert_col', 4, 3);
    // 从第4行开始删除2行.
    hot.alter('remove_row', 4, 2);
    // 删除5个非连续行(从visual index 1中删除3行，从visual index 5中删除2行).
    hot.alter('remove_row', [[1, 3], [5, 2]]);

**clear()：**清除表中的数据（表设置保持不变）

**colOffset()、rowOffset()：**返回第一个呈现列的可视索引

**colToProp （可视列索引）：**返回与给定列索引对应的属性名称（如果数据源是数组数组，则返回列索引）

console.log(hot.colToProp(0)); // riqi

**countCols()：**返回表中可见列的总数

**countEmptyCols()：**返回空列数，可选参数如果true，将仅计算数据源行末尾的空列  
**countEmptyRows()：**返回空行数，可选参数如果true，只计算数据源末尾的空行

**countRenderedCols()：**返回渲染列的数量（包括在视口外部分或完全渲染的列）。如果表不可见，则返回-1  
**countRenderedRows()：**返回渲染行的数量（包括在视口外部分或完全渲染的行）。如果表不可见，则返回-1

**countRows()：**返回表中可视行的总数

**countSourceCols()：**返回数据源中的总列数  
**countSourceRows()：**返回数据源中的总行数

**countVisibleCols()：**返回可见列的数量。如果表不可见，则返回-1  
**countVisibleRows()：**返回可见行数（完全适合视口内部的渲染行）

**deselectCell()：**取消选择表格上的当前单元格选择

**destroy()：** 从DOM中删除表并销毁Handsontable的实例

**destroyEditor（revertOriginal，prepareEditorIfNeeded）：**销毁当前编辑器，渲染表并准备新选择的单元格的编辑器

**emptySelectedCells()：**擦除表中已选择的单元格中的内容

**getActiveEditor()：**返回活动的编辑器类实例

**getCell(row, column, topmost)：**返回元素值

**getCellEditor(row, column)：**通过提供返回单元格编辑器类row和column参数

**getCellMeta(row, column)：**返回给定row和column坐标的单元属性对象

**getCellMetaAtRow(row)：**返回指定物理行索引的单元元对象数组

**getCellRenderer(row, column)：**返回单元格渲染器函数

**getCellsMeta()：**获取表中生成的至少一次的所有单元格元设置（按单元初始化顺序）

**getCellValidator(row, column)：**返回单元格验证器

**getColHeader(column)：**返回列标题数组

**getColWidth(column)：**返回请求列的宽度

**getCoords(element)：**返回单元格的坐标，以HTML表格单元格元素的形式提供

**getCopyableData(row, column)：**返回指定row和column索引处数据的可复制值

**getCopyableText(startRow,startCol,endRow,endCol)：**返回所选范围的字符串值,每个列由制表符分隔，每一行用换行符分隔

console.log(hot.getCopyableText(1,1,3,3));

![20190729112946418.png][]

**getData(row,column,row2,column2)：**返回当前数据对象（与data配置选项或loadData方法传递的数据对象相同)

// 获取所有数据（按照表中呈现的方式）.
    hot.getData();
    // 获取数据片段（从左上角开始，从0到右3，3）.
    hot.getData(3, 3);
    // 获取数据片段（从左上2、1到右3、3）。
    hot.getData(2, 1, 3, 3);

**getDataAtCell(row, column)：**返回单元格值。如果对数据进行重新排序，排序或修剪，则将使用当前可见的顺序

**getDataAtCol(column)：**返回数据源中列值的数组

**getDataAtProp(prop)：**给定对象属性名称（例如'address'或'0'），从表数据返回列值的数组

**getDataAtRow(row)：**返回单行数据

**getDataAtRowProp(row,prop)：**返回visual row和propindex 处的值

**getDataType(rowFrom,columnFrom,rowTo,columnTo)：**返回单元格类型

**getInstance()：**返回Handsontable实例

**getRowHeader(\[row\])：**返回行标题值的数组（注意：必须设置了rowHeights才会有值存在）

**getSelected()：**将当前选定单元格的索引作为数组数组返回

**getSelectedLast()：**返回作为数组应用于表的最后一个坐标

**getSelectedRange()：**返回当前所选区域的坐标

**getSourceData(row,column,row2,column2)：**返回源数据对象（与data配置选项或loadData方法传递的对象相同）

**getSourceDataArray(row,column,row2,column2)：**即使源数据以其他格式提供，也将源数据对象作为数组格式的数组返回

**getSourceDataAtCell(row, column)：**从数据源返回单个值

**getSourceDataAtCol(column)：**返回数据源中的列值数组

**getSourceDataAtRow(row)：**返回单行数据（数组或对象，具体取决于您使用的数据格式）

**getValue()：**从所选单元格中获取值

**hasColHeaders()，hasRowHeaders()：**用了列标题返回true，否则返回false

**hasHook('afterChange')：**检查否添加了指定侦听器

**isColumnModificationAllowed()：**检查数据格式和配置是否允许用户修改列结构

**isEmptyCol(column)，isEmptyRow(row)：**检查column参数声明的列中的所有单元格是否为空

**isListening()：**判断当前Handsontable实例是否在侦听文档正文上的键盘输入

**loadData(data)：**将新数据加载到Handsontable,加载新数据会重置单元格元

**populateFromArray(row, column, input, endRow, endCol, source, method, direction, deltas)：**使用2D输入阵列（例如\[\[1, 2\], \[3, 4\]\]）填充位置处的单元格

**propToCol(prop)：**返回与给定属性对应的列索引

**hot.removeHook('afterChange', function(changes) \{\})：**删除先前注册的侦听器

**runHooks(key，p1，p2，p3，p4，p5，p6)：**key使用其他参数中给出的参数运行参数中提供的钩子的回调

**scrollViewportTo(row，column，snapToBottom，snapToRight)：**将视口滚动到由row和column参数指定的坐标。如果滚动成功则返回true，否则返回false

**selectAll()：**选择整个表格，之前的选择将被覆盖

**selectCell(row，column，endRow，endColumn，scrollToCell，changeListener)：**选择指定的单元格row和column值或一系列单元格endRow，以endCol

**selectCells(coords，scrollToCell，changeListener)：**进行多个非连续选择，row并且column值或一系列单元格在endRow，endColumn

**selectColumns(startColumn，endColumn)，selectRows(startRow，endRow)：**

// 使用可视索引选择列.
    hot.selectColumns(1);
    // 使用栏目属性选择栏目.
    hot.selectColumns('id');
    // 使用可视索引选择列的范围.
    hot.selectColumns(1, 4);
    // 使用栏目属性选择列的范围。
    hot.selectColumns('id', 'last_name');

**setDataAtCell(row,column,value,source)：**为单元格设置新值。要一次更改多个单元格（推荐方式），请将changes格式数组  
\[\[row, col, value\],...\]作为第一个参数传递

**setDataAtRowProp(row,column,value,source)：**为单元格设置新值。要一次更改多个单元格（推荐方式），请将changes格式数组\[\[row, prop, value\],...\]作为第一个参数传递

**spliceCol(column,index,amount,elements),spliceRow(column,index,amount,elements)：**添加/删除列中的数据

**toPhysicalColumn(column),toPhysicalRow(row)：**将视觉列索引转换为物理列

**toVisualColumn(column),toVisualRow(row)：**将物理列索引转换为可视化

**unlisten()：**停止在文档正文上听取键盘输入

**updateSettings(settings,init)：**如果需要在初始化后更改配置，请使用它。所述settings参数是一个包含新的对象  
设置，声明为在初始设置对象相同的方式

**validateCells(回调)：**使用验证器函数验证所有单元格，并在完成后调用回调。如果其中一个单元格无效，则将使用'valid'参数触发回调

hot.validateCells((valid) => {
      if (valid) {
        // ... code for validated cells
      }
    })

**validateColumns(column，回调)：**使用验证器函数验证列，完成后调用回调

**validateRows(row，回调)：**使用验证器函数验证行，完成后调用回调

[https_blog.csdn.net_qianqianyixiao1_article_details_81507257]: https://blog.csdn.net/qianqianyixiao1/article/details/81507257
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20211122/eb44ce9d5293448a81ceb28202b8db86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1]: /images/20211122/bc2d698f34014d0684be00095c569ef8.png
[20190729112946418.png]: /images/20211122/0db08ccc3b2f4ab2af6e49fb3ba61a7a.png