类似Excel的插件，Handsontable的使用心得

摘要：

    最近做的一个功能需要配置表格，其中包括了对于表格的各种操作，比如合并单元格、删除行列等一些类似Excel的操作。然后发现了Handsontable的插件。该开源项目在github上有9k多star，还不错，基本能满足大部分操作。其原理是将所有的对于表格的操作都有对应的属性。

一：安装

            此次对于PC和APP均使用了，该项目有对应的React插件。

      npm install handsontable

            对于普通的页面使用该插件下载完整包后，需要导入一个handsontable.full.js文件和handsontable.full.css文件。

二：使用

        1. React使用

        在页面首先引入改插件：

    import HotTable from 'react-handsontable';

        

    引入成功后即可像一般组件一样使用<HotTable>

        2.普通页面使用

        new Handsontable(container, {});

                第一个参数是改插件放在哪个dom节点上，第二个参数是一个对象，用来设置表格的各个参数。

三：各配置项解释

    data: 存储表格内的数据，数组类型[["a", "b", "c"], ["a", "b", "c"], ["a", "b", "c"]]。

    colHeaders、rowHeaders: 是否显示表头，boolean类型数据，默认true

    mergeCells: 所有合并单元格的信息，数组对象

    readOnly: 是否只读，默认fasle

    colWidths: 列宽

    rowHeights: 行高

    height: 表格高度

    width: 表格宽度

    fixedColumnsLeft: 固定前几列

    cells：所有的单元格渲染，可以对于特殊的单元格的渲染进行特殊处理

    afterChange: 单元格内容被修改后调用的方法，有一个参数changes,改对象包含了修改前后的信息

    contextMenu: 右键的快捷菜单，有items和callback，分别是右击时选择的菜单信息和回调函数，可以自定义操作

                        contextMenu={{items: {
                           "row_above": {
                             name: '向上方插入一行',
                           },
                           "row_below": {
                             name: '向下方插入一行',
                           },
                           "col_left": {
                             name: '向左侧插入一列',
                           },
                           "col_right": {
                             name: '向右侧插入一列',
                           },
                           "remove_row": {
                             name: '删除行',
                             disabled: () => {
                                let result = false;


                                if(selectCell['r'] != selectCell['r2']) {
                                   return true;
                                }


                                mercells.map((merge, idx) => {
                                   if(selectCell['r'] <= (merge['row'] + merge['rowspan'] - 1) && selectCell['r'] >= merge['row'] && merge['rowspan'] != 1) {
                                      result = true;
                                   }
                                });


                                return result;
                             }
                           },
                           "remove_col": {
                              name: '删除列',
                              disabled: () => {
                                 let result = false;


                                 if(selectCell['c'] != selectCell['c2']) {
                                    return true;
                                 }


                                 mercells.map((merge, idx) => {
                                    if(selectCell['c'] <= (merge['col'] + merge['colspan'] - 1) && selectCell['c'] >= merge['col'] && merge['colspan'] != 1) {
                                       result = true;
                                    }
                                 });


                                 return result;
                              }
                           },
                           "mergeCells": {
                             name: '合并单元格',
                           },
                           "unmerCells": {
                              name: '取消合并',
                              disabled: () => {
                                 if(selectCell['r'] == selectCell['r2'] && selectCell['c'] == selectCell['c2']) {
                                    return true;
                                 }
                                 else {
                                    return false;
                                 }
                              }
                           },
                           "fixColumn": {
                              name: '固定列',
                              disabled: () => {
                                 return this.state.fixColumn != 0;
                              }
                           },
                           "unFixColumn": {
                              name: '取消固定列',
                              disabled: () => {
                                 return this.state.fixColumn == 0;
                              }
                           }
                        },
                        callback: (key, options) => {
                           if(key == 'unFixColumn') {
                              this.setState({
                                 fixColumn: 0
                              });


                              this.props.changeFixed(0);
                           }
                           else if(key == 'unmerCells') {
                              mercells.map((item, idx) => {
                                 if(item['row'] == options['start']['row'] && item['col'] == options['start']['col']) {
                                    mercells.splice(idx, 1);
                                 }
                              });
                              this.props.changeMerge(mercells);
                              this.setState({
                                 mergeMsg: mercells
                              });
                           }
                        }}}

    maxCols: 最大列数

    maxrows: 最大行数

    afterSelection: 选择单元格后，参数（r, c, r2, c2）分别是选择开始和结束的单元格的行和列

    disableVisualSelection： 选择单元格后的边框不变色，也可以理解为不能选中单元格