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; // procell?: any[];cells?: (row?: number, col?: number, prop?: object) => GridSettings;checkedTemplate?: boolean | string;className?: string | any[];colHeaders?: ((index?: number) => void) | boolean | any[];collapsibleColumns?: boolean | any[]; // procolumnHeaderHeight?: number | any[];columns?: ((index?: number) => void) | any[];columnSorting?: boolean | object;columnSummary?: object; // procolWidths?: ((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[]; // proeditor?: string | (() => void) | boolean;enterBeginsEditing?: boolean;enterMoves?: object | (() => void);fillHandle?: boolean | string | object;filter?: boolean;filteringCaseSensitive?: boolean;filters?: boolean; // profixedColumnsLeft?: number;fixedRowsBottom?: number; // profixedRowsTop?: number;fragmentSelection?: boolean | string;ganttChart?: object; // proheaderTooltips?: boolean | object; // proheight?: number | (() => void);hiddenColumns?: boolean | object; // prohiddenRows?: boolean | object; // proinvalidCellClassName?: 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[]; // pronoWordWrapClassName?: 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; // protrimWhitespace?: 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,3manualColumnResize: true, //是否可以手动拖拽列宽manualRowResize: true, // 拖拽行高outsideClickDeselects: false, // 点击到表格以外，表格就失去focusmergeCells: 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: 一些属性值}
}

handsontable使用及遇到的坑-前言相关推荐

handsontable使用及遇到的坑--mergeCell、合并单元格
在一般的博客中看的合并单元格的方法一般博客中用的updateSetting这个方法,我只想说真的是没真正的用心用过,如 handsontableIntance.updateSettings({//. ...
前后端分离之Vue(三)爬过得那些坑
爬过得那些坑前言:在整个Vue的过程中,遇到了不少坑.查找不同的资料,把这些坑给填了,记录下这些坑,以及解决办法. 一.Http请求的那些坑 1.不支持http请求表现为:程序启动正常,点击按妞不 ...
Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑（转载）
转自:https://www.cnblogs.com/ibingshan/p/10334471.html Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑前言 ...
c++ | 尝试攥写头文件遇到的坑
目录前言关于头文件路径的坑关于多文件编译的坑前言今日想学习c++项目的文件结构,顺便利用文件结构来复习数据结构,结果问题一个接一个,故记录下今天遇到的各种坑. 背景:vscode 文件结构: ...
利用convert【ImageMagick】把pdf批量转换为图片踩坑（gs报错和清晰度问题）
利用convert[ImageMagick]把pdf批量转换为图片踩坑前言坑1 gs报错解决方案: 坑2 导出的文件太模糊解决方案参数介绍: 总结最后附上完整的命令前言最近做一个pdf ...
golang坑之 'godoc' 不是内部或外部命令,...
golang坑之 'godoc' 不是内部或外部命令,... golang坑之 'godoc' 不是内部或外部命令,... 前言我遇到的坑跳坑总结 golang坑之 'godoc' 不是内部或外 ...
android代码混淆个人总结及踩坑
android代码混淆个人总结及踩坑前言公司项目使用组件化开发的形式,需要对自己负责的模块进行一些混淆配置,关于混淆相信做android开发的都或多或少有过一些接触,通过对混淆文件的配置从而将代码 ...
双硬盘装双系统遇到的坑
双硬盘装双系统遇到的坑前言一.双硬盘怎么装双系统? 二.步骤 1.分区 2.安装Ubuntu18.04 总结前言作者此前一直用的win10,直到最近因为学习要求需要给电脑再装一个Ubuntu1 ...
AS Library 使用NDK 的一些坑 Unable to strip library (+深入了解部分gradle机制)
转自: https://www.twblogs.net/a/5c53f1d5bd9eee06ee217e42# 和https://fucknmb.com/2017/05/11/Android-Stud ...
cesium入坑 -- 各种API调用与API本身使用的坑
cesium入坑2 – 各种API调用的坑前言: cesium作为一个3D渲染的地图库,功能非常强大,但是它的官方文档和API的查找处理等实在是体验极差,使用久了对API的查找还行,开入手时每个AP ...

handsontable使用及遇到的坑-前言

handsontable的配置项有哪些

用这些配置的方法

常用配置解释

handsontable使用及遇到的坑-前言相关推荐

最新文章

热门文章