handsontable单元格操作方法

    handsontable是一款快速、安全、可靠的电子表格组件，可用于各种技术，如React、Angular和Vue。以下是关于近期使用handsontable过程中的一些总结。 

1. 数据配置新建空白的表格

var container = document.getElementById('example');
var hot = new Handsontable(container, {
        data: Handsontable.helper.createEmptySpreadsheetData(40, 26), //创建的是40行，26列的空白表格	
        minRows: 5,  //最少行数
        minCols: 6, //最少列数
        rowHeaders: true,// 行头
        colHeaders: true,// 列头
        contextMenu: true,// 右键单元格菜单
        manualColumnResize: true,// 列拖拽改变大小
        manualRowResize: true,// 行拖拽改变大小
        columnSorting: true,// 列排序
        observeChanges: false, //启用observeChanges插件
        mergeCells: true,// 合并单元格
        comments: true, // 启用批注
        search: true,// 查询
        manualColumnMove: true,// 列移动
        manualRowMove: true,// 行移动
        currentRowClassName: 'currentRow', // 当前行的类名
        currentColClassName: 'currentCol', // 当前列的类名
        autoColumnSize: true, // 自适应列大小
        customBorders: true,  //自定义边框设置
        headerTooltips:true, //工具栏启用
        dropdownMenu: true,// 下拉菜单
        filters:true, // 筛选条件
});

其中下拉菜单是表格表头的下拉菜单功能，只有在pro的文件引用下才能正常使用，筛选条件是只有在打开下拉菜单功能后正常使用。

2. 获取选中多个单元格的值

hot.getData(r,c,r2,c2);

r起始行索引，c起始列索引，r2终止行索引，c2终止列索引

3. 获取选中的某个单元格的值

hot.getDataAtCell(row,col);

row单元格所在的行，col单元格所在的列

4. 设置值到某个单元格

hot.setDataAtCell(row, col, value, source);

row单元格所在的行，col单元格所在的列，value为要设置的值，source为选填项（在onAfterChange或onBeforeChange回调中有用）

5. 设置单元格为选中状态

hot.selectCell(row, col,row1,col1);

row为选中的起始行，col为选中的起始列，row1为选中的终止行，col1为选中的终止列

6.添加行和列的操作

hot.alter('insert_col',2); // 在第3列插入一列
hot.alter('insert_row',2); // 在第3行插入一行

7 .删除行和列

hot.alter('remove_row'); // 删除行
hot.alter('remove_col');  // 删除列

8. 修改单元格的数据类型

Handsontable提供的单元格类型有：数字(numeric)、日期(date)、时间(time)、复选框(checkbox)、选择(select)、下拉框(dropdown)、自动匹配(autocomplete)、密码(password)、表格模式(Handsontable)、默认是文本（text）。

以设置第3行第3列的单元格数据类型是下拉框为例：

方法一：

hot.updateSettings({
                cell: [
                    {row:2,col:2,type: ‘dropdown’,source:['Ben','Chris','Jessica','Kate','Michael','Monica','Omar','Paul','Samuel',]}
                ]
            });

方法二：

此方法会遍历表格每一个格子进行匹配，有确定好的单元格也可以用这个方法实现，但对于要求自定义某一个单元格数据类型时，不建议使用此方法。切换某一个数据类型也会有影响其他单元格的数据类型。

hot.updateSettings({
 cells: function(row, column) {
    var cellMeta = {};
    if (column === 2&&row===2) {
      cellMeta.type = 'dropdown';
      cellMeta.source = [
        'Ben',
        'Chris',
        'Jessica',
        'Kate',
        'Michael',
        'Monica',
        'Omar',
        'Paul',
        'Samuel',
      ];
    }
    return cellMeta;
  }
})

9. 修改列的数据类型

hot.updateSettings({
         column: [{},{type: 'numeric'},{}]
            });

设置列的数据类型时，默认从索引列为0开始，若不需要设置则为空，对需要修改的列进行相应的数据类型设置

10 .清空表格数据

hot.clear();

11.获取选中的单元格

hot.getSelected();  // 取得选中单元格的起始行、起始列、终止行、终止列