handsontable 常用 配置项 笔记

import React, { Component } from 'react';
import HotTable from 'react-handsontable';

import HandsontablePro from 'handsontable-pro';  // 这个对象下有handsontable的下很多方法

class ExampleHandsontable extends Component {
    constructor(...reset) {
        super(...reset);
        this.state = {
                settings: {}, // ? 不要引用这个，不生效的，不懂为什么
        };
        this.settings = {
            data: this.objectData,
            // data: HandsontablePro.helper.createSpreadsheetData(100, 50),
            // data: this.getDate(),
            width: 800, // 宽
            height: 350, // 高
            // 标题操作
            rowHeaders: ['ID', 'Name', 'Address'], // 每列的标题，如果不够，则用大写字母补充
            colHeaders: ['ID', 'Name', 'Address', 'Another long label'], // 每列的标题，如果不够，则用大写字母补充
            rowHeaders: false, // 生效
            colHeader: true, // 显示顶标题, 经测试。并不生效
            rowHeader: true, // 显示左标题, 经测试。并不生效
            colWidths: 100, // 单元格宽
            rowHeights: 23, // 单元格高
            colWidths: [45, 100, 160, 60, 80, 80, 80], // 可以批量设置
            rowHeights: [50, 40, 100], // 批量设置
            colWidths: (col) => { console.log(`colWidths的回调：第几列${col}`); if (col === 2) return 100 },
            nestedHeaders: [
                ['A', { label: 'B', colspan: 8 }, 'C'],
                ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],
                ['H', { label: 'I', colspan: 2 }, { label: 'J', colspan: 2 }, { label: 'K', colspan: 2 }, { label: 'L', colspan: 2 }, 'M'],
                ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
            ],
            collapsibleColumns: [
                { row: -4, col: 1, collapsible: true },
                { row: -3, col: 1, collapsible: true },
                { row: -2, col: 1, collapsible: true },
                { row: -2, col: 3, collapsible: true }
            ],
            // ! 行操作
            fixedRowsTop: 2, // 固定的行
            fixedColumnsLeft: 3, // 固定的列
            fixedRowsBottom: 2, // 固定底行
            stretchH: "all",  // 拉伸行，可选值为，all 拉伸所有，none 不拉伸，last 拉伸最后一行
            manualColumnResize: true, // 列拉伸,调整大小
            manualRowResize: true, // 行拉伸,调整大小
            manualColumnMove: true, // 拖动交换列
            manualRowMove: true, // 拖动交换行
            hiddenRows: { // 隐藏行
                rows: [0, 1],
                indicators: false, // 官网说必须为true 才会隐藏，然而实际上并不是
                copyPasteEnabled: false // 为false 时跳过复制
            },
            hiddenColumns: { // 隐藏列
                columns: [3, 5, 9],
                indicators: true
            },
            headerTooltips: true, // 提示
            headerTooltips: { // 提示
                rows: true,
                columns: true,
                onlyTrimmed: true
            },
            startRows: 5,
            startCols: 5,
            minSpareRows: 1, // 下方总是空一行
            minSpareCols: 1, // 右方总是空一行
            stretchH: 'all',
            // 行相关事件
            beforeColumnMove: this.beforeColumnMove, // 列被移动之前触发
            afterColumnMove: this.afterColumnMove, // 列顺序被移动后触发
            afterRowMove: this.afterRowMove, // 行被移动后触发

            beforeRowResize: this.beforeRowResize, // 行拉伸之前触发
            afterRowResize: this.afterRowResize, // 行拉伸后触发
            beforeColumnResize: this.beforeColumnResize, // 列拉伸之前触发
            afterColumnResize: this.afterColumnResize, // 列拉伸之后触发

            beforeRemoveCol: this.beforeRemoveCol, // 列被移动前触发
            beforeRemoveRow: this.beforeRemoveRow, // 行被移动前被触发
            afterRemoveCol: this.afterRemoveCol, // 列被移动后触发
            afterRemoveRow: this.afterRemoveRow, // 行被移动后触发

            beforeCut: this.beforeCut, // 剪切之前触发
            afterCut: this.afterCut, // 剪切之后触发
            beforeCopy: this.beforeCopy, // 复制之前触发
            afterCopy: this.afterCopy, // 复制之后触发
            beforePaste: this.beforePaste, // 粘贴之前触发
            afterPaste: this.afterPaste, // 粘贴之后触发

            afterCreateCol: this.afterCreateCol, // 插入列后触发，向上和向下插入都是这个参数1是新行索引，参数2 是旧行索引，
            afterCreateRow: this.afterCreateRow, // 插入行后触发，向上和向下插入都是这个参数1是新行索引，参数2 是旧行索引，

            afterDestroy: this.afterDestroy, // 销毁Handsontable实例后被调用
            afterInit: this.afterInit, // Handsontable实例被初始化后调用
            beforeInit: this.beforeInit, // Handsontable实例被初始化前调用
            beforeRender: this.beforeRender, // 渲染前触发
            afterRender: this.afterRende.bind(this, isForced), // 表格渲染后触发 isForced：当其值为true表示是通过改变配置或数据引起的渲染，当值为false时表示通过滚动或移动、选中引起的渲染
            afterRenderer: this.afterRenderer, // 手动调用渲染后触发
            afterOnCellCornerMouseDown: this.afterOnCellCornerMouseDown, // 鼠标点击单元格边角后被调用
            afterOnCellCornerDblClick: this.afterOnCellCornerDblClick, // 鼠标双击击单元格边角后被调用
            afterOnCellMouseDown: this.afterOnCellMouseDown, // 点击单元格后触发
            afterOnCellMouseOver: this.afterOnCellMouseOver, // 移入单元格触发

            afterDocumentKeyDown: this.afterDocumentKeyDown, // 输入单元格键盘按下之后触发
            beforeKeyDown: this.beforeKeyDown, // 输入单元格键盘按下之前触发

            afterContextMenuShow: this.afterContextMenuShow, // 点击右键，显示右键菜单之后触发
            afterContextMenuHide: this.afterContextMenuHide, // 右键菜单隐藏后触发

            afterCellMetaReset: this.afterCellMetaReset, // 重置单元格后触发
            beforeChange: this.beforeChange, // 单元格改变前触发
            afterChange: this.afterChange, // 单元格改变后触发

            afterDeselect: this.afterDeselect, // 当前单元格被取消时触发
            afterSelection: this.afterSelection.bind(this, a, b, c, d), // 选中单元格后触发
            // a 选中的单元格起始行 b 选中的单元格的起始列 c 选中单元格的终止行 d 选中的单元格的终止列
            afterSelectionEnd: this.afterSelectionEnd, // 选中单元格鼠标抬起后调用
            afterSelectionByProp: this.afterSelectionByProp, // 通过属性名选中单元格后调用
            afterSelectionEndByProp: this.afterSelectionEndByProp, // 通过属性选中单元格鼠标抬起后调用

            beforeAutofill: this.beforeAutofill, // 开始自动填充前调动

            dataSchema: { id: null, name: { first: null, last: null }, address: null }, // 数据如果开始为空，那么根据这个数据结构来造数据
            afterChange: (change, source) => { console.log("afterChange:数据改变, change 是所改变单元格的属性，第一个是列的索引，第二个是数据的键，第三个是之前的值，最后一个是值", change, source) },
            columns: [ // 用某一列覆盖某一列 此时 minSpareCols 不生效
                { data: 0 }, //0 用第一列复制第一列
                { data: 1 }, //1 用第2列复制第2列
                { data: 2 }, //2 用第3列复制第3列
                { data: 3 }, //3 用第4列复制第4列
                { data: 4 }, //4 用第5列复制第5列
                { data: 4 }, //5 用第5列复制第6列
                { data: 4 }, //5 用第5列复制第6列
                { data: 4 }, //5 用第5列复制第6列
            ],
            columns: function (column) {
                // column 为当前列的索引
                var columnMeta = {};
                if (column === 0) {
                    columnMeta.data = 'id';

                } else if (column === 1) {
                    columnMeta.data = 'name.first';

                } else if (column === 2) {
                    columnMeta.data = 'name.last';

                } else if (column === 3) {
                    columnMeta.data = 'address';

                } else {
                    columnMeta = null;
                }
                return columnMeta;
            },
            columns: [
                {
                    data: "email",
                    validator: this.emailValidator,
                    allowInvalid: true, // 是否启用验证
                },
            ],
            persistentState: true, // 本地数据保存
            readOnly: true, // 禁用，不可编辑
            cell: [ // 对单元格的一些操作
                // { row: 0, col: 1, readOnly: true }, // 第一行，第二列的单元格禁用
            ],
            cells: (row, col, prop) => {
                console.log("cells:")
                console.log(row, col, prop);
                // 行 , 列 , 键
                return
            },
            // ! 下拉式菜单
            dropdownMenu: true, // 下拉式菜单
            dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],

            comments: true, // 添加注释
            // 自定义右键菜单
            contextMenu: true,
            contextMenu: ['row_above', 'row_below', 'remove_row'],
            contextMenu: {
                callback: function (key, options) {
                    console.log(key);
                    console.log(options);
                    if (key === 'about') {
                        setTimeout(function () {
                            // timeout is used to make sure the menu collapsed before alert is shown
                            // alert("This is a context menu with default and custom options mixed");
                        }, 100);
                    }
                },
                items: {
                    "row_above": {
                        disabled: function () {
                            // if first row, disable this option
                            return true;
                        }
                    },
                    "row_below": {},
                    "hsep1": "---------",
                    "remove_row": {
                        name: 'Remove this row, ok?',
                        disabled: function () {
                            // if first row, disable this option
                            return true
                        }
                    },
                    "hsep2": "---------",
                    "about": { name: 'About this menu' }
                }
            },
            beforeCopy: () => { },
            beforeCut: () => { },
            beforePaste: () => { },
            afterCopy: function (changes) {
                // this.clipboardCache = sheetclip.stringify(changes);
                // changes : ["A5"]
                // var sheetclip = new SheetClip();
                console.log(this);
                // console.log("afterCopy", sheetclip.stringify(changes));
                console.log(changes);
                this.state.clipboardCache = "";
            },
            afterCut: function (changes) {
                this.clipboardCache = sheetclip.stringify(changes);
            },
            afterPaste: function (changes) {
                // we want to be sure that our cache is up to date, even if someone pastes data from another source than our tables.
                this.clipboardCache = sheetclip.stringify(changes);
            },
            currentRowClassName: 'currentRow', // 突出显示行
            currentColClassName: 'currentCol', // 突出显示列
            copyPaste: true, // 允许粘贴
            mergeCells: true, // 合并单元格 或者提前合并  mergeCells: [{row: 1, col: 1, rowspan: 2, colspan: 2}]
            contextMenu: {
                callback: function (key, options) {

                },
                items: {
                    "row_above": { name: "向上插入一行" },
                    "row_below": { name: "向下插入一行" },
                    "remove_row": { name: "删除一行" },
                    "remove_col": { name: "删除一列", disabled: () => { } },
                    "col_left": { name: "向左添加一列" },
                    "col_right": { name: "向右添加一列" },
                    "hsep1": "---------",
                    "hsep2": "---------",
                    "hsep3": "---------",
                    "undo": { name: "撤销" },
                    "redo": { name: "恢复" },
                    "copy": { name: "复制" },
                    "cut": { name: "剪切" },
                    "commentsAddEdit": { name: "添加注释" },
                    "commentsRemove": { name: "删除注释" },
                    "make_read_only": { name: "只读" },
                    "alignment": { name: "对齐" },
                    "paste": {
                        name: '粘贴',
                        // disabled: function () {
                        //     return clipboardCache.length === 0;
                        // },
                        callback: function () {
                            // var plugin = this.getPlugin('copyPaste');

                            // this.listen();
                            // plugin.paste(clipboardCache);
                            var plugin = this.getPlugin('copyPaste');
                            this.listen();
                            plugin.paste(11);
                            // console.log(this);
                            console.log("paste回调")
                            console.log(this)
                        }
                    }
                },

            },
            customBorders: [
                {
                    range: {
                        from: {
                            row: 1,
                            col: 1
                        },
                        to: {
                            row: 3,
                            col: 4
                        }
                    },
                    top: {
                        width: 2,
                        color: '#5292F7'
                    },
                    left: {
                        width: 2,
                        color: 'orange'
                    },
                    bottom: {
                        width: 2,
                        color: 'red'
                    },
                    right: {
                        width: 2,
                        color: 'magenta'
                    }
                },
                {
                    row: 2,
                    col: 2,
                    left: {
                        width: 2,
                        color: 'pink'
                    },
                    right: {
                        width: 1,
                        color: 'green'
                    }
                }],
            // sortIndicator: true
            columnSorting: true, // 排序功能
            columns: [
                {
                    data: 'car' // 普通的字符串
                    // 1nd column is simple text, no special options here
                },
                {
                    type: 'numeric', // 数字 132132
                },
                {
                    type: 'numeric',
                    format: '格式化 0,0.00'  // 格式化操作
                },
                {
                    data: 'year', // 年   2017年
                    type: 'numeric'
                },
                {
                    data: 'price_usd', // $ 美元格式化
                    type: 'numeric',
                    format: '$0,0.00',
                    language: 'en-US' // this is the default locale, set up for USD
                },
                {
                    data: 'price_eur', // 欧元 格式化
                    type: 'numeric',
                    format: '0,0.00 $',
                    language: 'de-DE' // i18n: use this for EUR (German)
                    // more locales available on http://numbrojs.com/languages.html
                },
                {
                    type: 'checkbox', // 复选框
                    data: 'available'
                },
                {
                    editor: 'select', // 向下选择框
                    selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']
                },
                {
                    type: 'dropdown', // 向下列表
                    source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
                },
                {
                    type: 'autocomplete', // 自动完成
                    source: ['yellow', 'red', 'orange and another color', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
                    strict: false,
                    trimDropdown: false
                },
                {
                    type: 'time', // 时间
                    timeFormat: 'h:mm:ss a',
                    correctFormat: true // 让不正确的也变成正确   为false时，填写错误会样式会变红
                },
                {
                    data: 'password',
                    type: 'password'
                },
                {
                    type: 'date',
                    dateFormat: 'MM/DD/YYYY',
                    correctFormat: true,
                    defaultDate: '01/01/1900',
                    // datePicker additional options (see https://github.com/dbushell/Pikaday#configuration)
                    datePickerConfig: {
                        // First day of the week (0: Sunday, 1: Monday, etc)
                        firstDay: 0,
                        showWeekNumber: true,
                        numberOfMonths: 3,
                        disableDayFn: function (date) {
                            // Disable Sunday and Saturday
                            return date.getDay() === 0 || date.getDay() === 6;
                        }
                    }
                }
            ]
       }
    }
    rander() {
        return (
             <HotTable root="hot" licenseKey={"00000-00000-00000-00000-00000"} settings={this.settings} />
        )
}

}

待续。。。