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} />
)
}
}
待续。。。
handsontable 常用 配置项 笔记的更多相关文章
- Linux 常用命令笔记
Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- hadoop 常用配置项【转】
hadoop 常用配置项[转] core-site.xml name value Description fs.default.name hdfs://hadoopmaster:9000 定义 ...
- Linux常用命令 笔记
Linux常用命令 笔记 一.文件处理命令 1. ls命令:显示目录文件 -a 显示所有文件,包括隐藏文件.(all) ...
- Intellij idea 系列教程之常用配置项
Intellij idea 系列教程之常用配置项 Intellij idea 系列教程目录(https://www.cnblogs.com/binarylei/p/10347600.html) Lan ...
- webpack常用配置项配置文件介绍
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- Eureka注册中心高可用及常用配置项
一.前言 前面已经简单的介绍了 Eureka 注册中心的使用以及查看.下面将继续进行 Eureka 的说明以及应用. 二.Eureka 的高可用搭建 在实际生产项目中,为了保证服务的可用性,连续性,一 ...
- Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递
[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...
- STL之vector常用函数笔记
STL之vector常用函数笔记 学会一些常用的vector就足够去刷acm的题了 ps:for(auto x:b) cout<<x<<" ";是基于范围的 ...
随机推荐
- Window中的Docker 拉取Mysql镜像 并在本地Navicate链接
首先本地 拉取mysql镜像 以下是所有mysql镜像 我自己下载的为5.6 下面 以5.6为例:(拉取mysql5.6镜像) docker pull mysql:5.6 创建一个容器 doc ...
- Java 高级框架——Mybatis(一)
一, SQl复习 a,数据库SQL命令 创建数据库并指定编码 Create database 数据库名 default character set utf8 create database ssm d ...
- 对python的一些拙见
对于python,总的来说有点机缘巧合的识得了它.当我录取专业是计算机的时候,身边的一些人向我介绍了这个解释型脚本语言吧.大一自学了一部分,刚好听的网课是嵩天老师的课,这学期迫不及待地拉着舍友选了这个 ...
- Delphi TreeView 节点上下移动
调用方法 procedure TfrmDataImport.B_ExcelDownClick(Sender: TObject); begin UpDownTVItem(TV_Import, 2); e ...
- 如何利用Git生成pitch和打pitch
利用Git生成和应用patch 在程序员的日常开发与合作过程中,对于code的生成patch和打patch(应用patch)成为经常需要做的事情. 什么是patch?简单来讲,patch中存储的是你 ...
- 20164304姜奥——Exp1 PC平台逆向破解
1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,ge ...
- idea中git常见使用场景
工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...
- join,left join,inner join,full join的区别?
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...
- python module -- sys
sys模块主要是用于提供对python解释器相关的操作 http://www.cnblogs.com/pycode/p/sysos.html http://blog.csdn.net/pipisorr ...
- 删除pending.xml
如果提示不能删除 需要在cmd命令行中执行如下命令 echo y|cacls D:\Windows\winsxs\reboot.xml /p everyone:f del /q D:\Windows\ ...