handsontable使用及遇到的坑-前言

handsontable的配置项有哪些

只说明常用的

    interface DefaultSettings extends GridSettings {}
    interface DefaultSettings extends Hooks {}

配置继承GridSettings 和Hooks

GridSettings

    interface GridSettings extends Hooks {
      allowEmpty?: boolean;
      allowHtml?: boolean;
      allowInsertColumn?: boolean;
      allowInsertRow?: boolean;
      allowInvalid?: boolean;
      allowRemoveColumn?: boolean;
      allowRemoveRow?: boolean;
      autoColumnSize?: object | boolean;
      autoComplete?: any[];
      autoRowSize?: object | boolean;
      autoWrapCol?: boolean;
      autoWrapRow?: boolean;
      bindRowsWithHeaders?: boolean | string; // pro
      cell?: any[];
      cells?: (row?: number, col?: number, prop?: object) => GridSettings;
      checkedTemplate?: boolean | string;
      className?: string | any[];
      colHeaders?: ((index?: number) => void) | boolean | any[];
      collapsibleColumns?: boolean | any[]; // pro
      columnHeaderHeight?: number | any[];
      columns?: ((index?: number) => void) | any[];
      columnSorting?: boolean | object;
      columnSummary?: object; // pro
      colWidths?: ((index?: number) => void) | number | string | any[];
      commentedCellClassName?: string;
      comments?: boolean | CommentObject[];
      contextMenu?: boolean | any[] | contextMenu.Settings;
      contextMenuCopyPaste?: object;
      copyable?: boolean;
      copyColsLimit?: number;
      copyPaste?: boolean;
      copyRowsLimit?: number;
      correctFormat?: boolean;
      currentColClassName?: string;
      currentHeaderClassName?: string;
      currentRowClassName?: string;
      customBorders?: boolean | any[];
      data?: any | any[];
      dataSchema?: object;
      dateFormat?: string;
      numericFormat?: object;
      debug?: boolean;
      defaultDate?: string;
      disableVisualSelection?: boolean | string | any[];
      dropdownMenu?: boolean | object | any[]; // pro
      editor?: string | (() => void) | boolean;
      enterBeginsEditing?: boolean;
      enterMoves?: object | (() => void);
      fillHandle?: boolean | string | object;
      filter?: boolean;
      filteringCaseSensitive?: boolean;
      filters?: boolean; // pro
      fixedColumnsLeft?: number;
      fixedRowsBottom?: number; // pro
      fixedRowsTop?: number;
      fragmentSelection?: boolean | string;
      ganttChart?: object; // pro
      headerTooltips?: boolean | object; // pro
      height?: number | (() => void);
      hiddenColumns?: boolean | object; // pro
      hiddenRows?: boolean | object; // pro
      invalidCellClassName?: string;
      isEmptyCol?: (col: number) => boolean;
      isEmptyRow?: (row: number) => boolean;
      label?: object;
      language?: string;
      manualColumnFreeze?: boolean;
      manualColumnMove?: boolean | any[];
      manualColumnResize?: boolean | any[];
      manualRowMove?: boolean | any[];
      manualRowResize?: boolean | any[];
      maxCols?: number;
      maxRows?: number;
      mergeCells?: boolean | any[];
      minCols?: number;
      minRows?: number;
      minSpareCols?: number;
      minSpareRows?: number;
      selectionMode?: 'single' | 'range' | 'multiple';
      nestedHeaders?: any[]; // pro
      noWordWrapClassName?: string;
      observeChanges?: boolean;
      observeDOMVisibility?: boolean;
      outsideClickDeselects?: boolean | ((target: HTMLElement) => boolean);
      pasteMode?: string;
      persistentState?: boolean;
      placeholder?: any;
      placeholderCellClassName?: string;
      preventOverflow?: string | boolean;
      readOnly?: boolean;
      readOnlyCellClassName?: string;
      renderAllRows?: boolean;
      renderer?: string | renderers.Base;
      rowHeaders?: boolean | any[] | (() => void);
      rowHeaderWidth?: number | any[];
      rowHeights?: any[] | (() => void) | number | string;
      search?: boolean;
      selectOptions?: any[];
      skipColumnOnPaste?: boolean;
      sortByRelevance?: boolean;
      sortFunction?: () => void;
      sortIndicator?: boolean;
      source?: any[] | (() => void);
      startCols?: number;
      startRows?: number;
      stretchH?: string;
      strict?: boolean;
      tableClassName?: string | any[];
      tabMoves?: object;
      title?: string;
      trimDropdown?: boolean;
      trimRows?: boolean; // pro
      trimWhitespace?: boolean;
      type?: string;
      uncheckedTemplate?: boolean | string;
      undo?: boolean;
      valid?: boolean;
      validator?: (value: any, callback: (valid: boolean) => void) => void | RegExp;
      viewportColumnRenderingOffset?: number | string;
      viewportRowRenderingOffset?: number | string;
      visibleRows?: number;
      width?: number | (() => void);
      wordWrap?: boolean;
    }

    interface Hooks {
      afterAddChild?: (parent: object, element: object | void, index: number | void) => void;
      afterBeginEdting?: (row: number, column: number) => void;
      afterCellMetaReset?: () => void;
      afterChange?: (changes: any[], source: string) => void;
      afterChangesObserved?: () => void;
      afterColumnMove?: (startColumn: number, endColumn: number) => void;
      afterColumnResize?: (currentColumn: number, newSize: number, isDoubleClick: boolean) => void;
      afterColumnSort?: (column: number, order: boolean) => void;
      afterContextMenuDefaultOptions?: (predefinedItems: any[]) => void;
      afterContextMenuHide?: (context: object) => void;
      beforeContextMenuShow?: (context: object) => void;
      afterContextMenuShow?: (context: object) => void;
      afterCopy?: (data: any[], coords: any[]) => void;
      afterCopyLimit?: (selectedRows: number, selectedColumnds: number, copyRowsLimit: number, copyColumnsLimit: number) => void;
      afterCreateCol?: (index: number, amount: number) => void;
      afterCreateRow?: (index: number, amount: number) => void;
      afterCut?: (data: any[], coords: any[]) => void;
      afterDeselect?: () => void;
      afterDestroy?: () => void;
      afterDetachChild?: (parent: object, element: object) => void;
      afterDocumentKeyDown?: (event: Event) => void;
      afterDropdownMenuDefaultOptions?: (predefinedItems: any[]) => void;
      afterDropdownMenuHide?: (instance: any) => void;
      beforeDropdownMenuShow?: (instance: any) => void;
      afterDropdownMenuShow?: (instance: any) => void;
      afterFilter?: (formulasStack: any[]) => void;
      afterGetCellMeta?: (row: number, col: number, cellProperties: GridSettings) => void;
      afterGetColHeader?: (col: number, TH: Element) => void;
      afterGetColumnHeaderRenderers?: (array: any[]) => void;
      afterGetRowHeader?: (row: number, TH: Element) => void;
      afterGetRowHeaderRenderers?: (array: any[]) => void;
      afterInit?: () => void;
      afterLoadData?: (firstTime: boolean) => void;
      afterModifyTransformEnd?: (coords: wot.CellCoords, rowTransformDir: number, colTransformDir: number) => void;
      afterModifyTransformStart?: (coords: wot.CellCoords, rowTransformDir: number, colTransformDir: number) => void;
      afterMomentumScroll?: () => void;
      afterOnCellCornerDblClick?: (event: object) => void;
      afterOnCellCornerMouseDown?: (event: object) => void;
      afterOnCellMouseDown?: (event: object, coords: object, TD: Element) => void;
      afterOnCellMouseOver?: (event: object, coords: object, TD: Element) => void;
      afterOnCellMouseOut?: (event: object, coords: object, TD: Element) => void;
      afterPaste?: (data: any[], coords: any[]) => void;
      afterPluginsInitialized?: () => void;
      afterRedo?: (action: object) => void;
      afterRemoveCol?: (index: number, amount: number) => void;
      afterRemoveRow?: (index: number, amount: number) => void;
      afterRender?: (isForced: boolean) => void;
      afterRenderer?: (TD: Element, row: number, col: number, prop: string | number, value: string, cellProperties: GridSettings) => void;
      afterRowMove?: (startRow: number, endRow: number) => void;
      afterRowResize?: (currentRow: number, newSize: number, isDoubleClick: boolean) => void;
      afterScrollHorizontally?: () => void;
      afterScrollVertically?: () => void;
      afterSelection?: (r: number, c: number, r2: number, c2: number, preventScrolling: object, selectionLayerLevel: number) => void;
      afterSelectionByProp?: (r: number, p: string, r2: number, p2: string, preventScrolling: object, selectionLayerLevel: number) => void;
      afterSelectionEnd?: (r: number, c: number, r2: number, c2: number, selectionLayerLevel: number) => void;
      afterSelectionEndByProp?: (r: number, p: string, r2: number, p2: string, selectionLayerLevel: number) => void;
      afterSetCellMeta?: (row: number, col: number, key: string, value: any) => void;
      afterSetDataAtCell?: (changes: any[], source?: string) => void;
      afterSetDataAtRowProp?: (changes: any[], source?: string) => void;
      afterTrimRow?: (rows: any[]) => void;
      afterUndo?: (action: object) => void;
      afterUntrimRow?: (rows: any[]) => void;
      afterUpdateSettings?: () => void;
      afterValidate?: (isValid: boolean, value: any, row: number, prop: string | number, source: string) => void | boolean;
      afterViewportColumnCalculatorOverride?: (calc: object) => void;
      afterViewportRowCalculatorOverride?: (calc: object) => void;
      beforeAddChild?: (parent: object, element: object | void, index: number | void) => void;
      beforeAutofill?: (start: object, end: object, data: any[]) => void;
      beforeAutofillInsidePopulate?: (index: object, direction: string, input: any[], deltas: any[]) => void;
      beforeCellAlignment?: (stateBefore: any, range: any, type: string, alignmentClass: string) => void;
      beforeChange?: (changes: any[], source: string) => void;
      beforeChangeRender?: (changes: any[], source: string) => void;
      beforeColumnMove?: (startColumn: number, endColumn: number) => void;
      beforeColumnResize?: (currentColumn: number, newSize: number, isDoubleClick: boolean) => void;
      beforeColumnSort?: (column: number, order: boolean) => void;
      beforeContextMenuSetItems?: (menuItems: any[]) => void;
      beforeCopy?: (data: any[], coords: any[]) => any;
      beforeCreateCol?: (index: number, amount: number, source?: string) => void;
      beforeCreateRow?: (index: number, amount: number, source?: string) => void;
      beforeCut?: (data: any[], coords: any[]) => any;
      beforeDetachChild?: (parent: object, element: object) => void;
      beforeDrawBorders?: (corners: any[], borderClassName: string) => void;
      beforeDropdownMenuSetItems?: (menuItems: any[]) => void;
      beforeFilter?: (formulasStack: any[]) => void;
      beforeGetCellMeta?: (row: number, col: number, cellProperties: GridSettings) => void;
      beforeInit?: () => void;
      beforeInitWalkontable?: (walkontableConfig: object) => void;
      beforeKeyDown?: (event: Event) => void;
      beforeOnCellMouseDown?: (event: Event, coords: object, TD: Element) => void;
      beforeOnCellMouseOut?: (event: Event, coords: wot.CellCoords, TD: Element) => void;
      beforeOnCellMouseOver?: (event: Event, coords: wot.CellCoords, TD: Element, blockCalculations: object) => void;
      beforePaste?: (data: any[], coords: any[]) => any;
      beforeRedo?: (action: object) => void;
      beforeRemoveCol?: (index: number, amount: number, logicalCols?: any[]) => void;
      beforeRemoveRow?: (index: number, amount: number, logicalRows?: any[]) => void;
      beforeRender?: (isForced: boolean, skipRender: object) => void;
      beforeRenderer?: (TD: Element, row: number, col: number, prop: string | number, value: string, cellProperties: GridSettings) => void;
      beforeRowMove?: (startRow: number, endRow: number) => void;
      beforeRowResize?: (currentRow: number, newSize: number, isDoubleClick: boolean) => any;
      beforeSetRangeEnd?: (coords: wot.CellCoords) => void;
      beforeSetRangeStart?: (coords: wot.CellCoords) => void;
      beforeStretchingColumnWidth?: (stretchedWidth: number, column: number) => void;
      beforeTouchScroll?: () => void;
      beforeUndo?: (action: object) => void;
      beforeValidate?: (value: any, row: number, prop: string | number, source?: string) => void;
      beforeValueRender?: (value: any, cellProperties: object) => void;
      construct?: () => void;
      hiddenColumn?: (column: number) => void;
      hiddenRow?: (row: number) => void;
      init?: () => void;
      manualRowHeights?: (state: any[]) => void;
      modifyAutofillRange?: (startArea: any[], entireArea: any[]) => void;
      modifyCol?: (col: number) => void;
      modifyColHeader?: (column: number) => void;
      modifyColWidth?: (width: number, col: number) => void;
      modifyCopyableRange?: (copyableRanges: any[]) => void;
      modifyData?: (row: number, column: number, valueHolder: object, ioMode: string) => void;
      modifyRow?: (row: number) => void;
      modifyRowHeader?: (row: number) => void;
      modifyRowHeaderWidth?: (rowHeaderWidth: number) => void;
      modifyRowHeight?: (height: number, row: number) => void;
      modifyRowSourceData?: (row: number) => void;
      modifyTransformEnd?: (delta: wot.CellCoords) => void;
      modifyTransformStart?: (delta: wot.CellCoords) => void;
      persistentStateLoad?: (key: string, valuePlaceholder: object) => void;
      persistentStateReset?: (key: string) => void;
      persistentStateSave?: (key: string, value: any) => void;
      skipLengthCache?: (delay: number) => void;
      unmodifyCol?: (col: number) => void;
      unmodifyRow?: (row: number) => void;
    }

用这些配置的方法

/**
    settings就是上面的那些配置项，第二个参数初始化时为true，已经渲染表格的话用false
*/
let handsontableInstance.updateSettings({...settings}, false);

常用配置解释

{
      colHeaders: true, //header就是顶部的ABCD，可以是自定义数组
      rowHeaders: true, //就是左边的1,2,3
      manualColumnResize: true, //是否可以手动拖拽列宽
      manualRowResize: true, // 拖拽行高
      outsideClickDeselects: false, // 点击到表格以外，表格就失去focus
      mergeCells: true, //boolean表示是否可合并单元格，Array可以设置初始的合并单元格，如：[{row:0,col:0,rowspan:1,colspan:2}]
      minCols: 5, //最小列数
      minRows: CONSTANT.DEFAULT_MIN_ROWS, //最小行数
      colWidths: 100, // 列宽，number：表示全部一样，Array<number>：对应列宽
      rowHeights: 25, // 和上面同理
      render: (hot,TD, row, col, prop, value: any, cellProperties) => { 
          // 自定渲染方法
          // hot: handsontable的实例
          // 单元格td的dom对象
          // row,col: 行列，和程序员计数法一样从0开始
          // 单元格里面的值
          // cellProperties: 一些属性值
      } 
}