hansontable简介

hansontable是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。

核心是由原生JavaScript构建,充分模块化,支持自定义build。

除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部分功能以插件提供。可以灵活构建插拔,自定义添加新功能插件。

github:https://github.com/handsontable/handsontable

  • 特性

hansontable free版本提供的重要特性有:单元格下拉自动补全、注释信息、右键菜单、复制粘贴、数据校验、合并单元格等等。

1.固定行列位置
fixedRowsTop:行数 //固定顶部多少行不能垂直滚动
fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动
2.拖拽行头或列头改变行或列的大小
manualColumnResize:true/false//当值为true时,允许拖动,当为false时禁止拖动
manualRowResize:true/false//当值为true时,允许拖动,当为false时禁止拖动
3.显示行头列头
colHeaders:true/fals/数组 //当值为true时显示列头,当值为数组时,列头为数组的值
rowHeaders:true/false/数组 //当值为true时显示行头,当值为数组时,行头为数组的值
4.右键菜单展示
contextMenu:true/false/自定义数组 //当值为true时,启用右键菜单,为false时禁用
5.自适应列大小
autoColumnSize:true/false //当值为true且列宽未设置时,自适应列大小
6.minCols:最小列数
minRows:最小行数
minSpareCols:最小列空间,不足则添加空列
maxCols:最大列数
maxRows:最大行数
minSpareRows:最小行空间,不足则添加空行
固定行列位置
fixedRowsTop:行数 //固定顶部多少行不能垂直滚动
fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动
7.允许排序
columnSorting:true/false/对象 //当值为true时,表示启用排序插件
hot.updateSettings({
columnSorting:false
});
排序的使用也可已直接调用sort()方法实现。如下操作:
if(hot.sortingEnabled){
hot.sort(行数,true/false); //true为升序,false为降序
}
8.延伸列的宽度
stretchH:last/all/none //last:延伸最后一列,all:延伸所有列,none默认不延伸。
9.手动固定某一列
manualColumnFreeze: true/false
//当值为true时,选中某一列,右键菜单会出现freeze this column选项,该选项的作用是固定这一列不可水平滚动,并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column,意思是取消该列的固定,并将其还原到初始位置。
10.设置当前行或列的样式
currentRowClassName:当前行样式的名称
currentColClassName:当前列样式的名称
11.行分组或列分组
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
上面的例子介绍了4个分组,第0-2列为一组,第3-5列为第二组,第0-4行为一组,第5-7列为第二组。分组可在行头或列头看见,分组可被展开或隐藏。
12.自适应列大小
autoColumnSize:true/false //当值为true且列宽未设置时,自适应列大小
colWidths:[列宽1,列宽2,...]/列宽值
13.observeChanges:true/false //当值为true时,启用observeChanges插件
14.自定义边框设置,可以进行初始化配置,如下:
customBorders:[{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]
15.单元格合并可以进行初始化配置
mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...],也可以先声明单元格允许合并,mergeCells:true,再利用合并方法操作。
16.data
(1)数组
data:[
["2015", "鄂Q2DY79", 50, 30, 4],
["2016", "冀D98998", 45, 56, 3],
["2017", "豫J63569", 30, 34, 3],
["2018", "京AF2336", 28, 32, 3],
["2019", "京AF2332", 60, 12, 2],
["2020", "渝A00001", 36, 13, 1],
["2021", "渝A00002", 33, 34, 1],
["2022", "渝A00003", 30, 23, 3],
["2023", "渝A00004", 45, 12, 4],
["2024", "渝A00005", 70, 22,6],
(2)对象
objectData:[
{year:"2015", car_no:"鄂Q2DY79", detail:50, "money":30, "judge":4},
{year:"2016", car_no:"冀D98998", detail:45, "money":56, "judge":3},
{year:"2017", car_no:"豫J63569", detail:30, "money":34, "judge":3},
{year:"2018", car_no:"京AF2336", detail:28, "money":32, "judge":3},
{year:"2019", car_no:"京AF2332", detail:60, "money":12, "judge":2},
{year:"2020", car_no:"渝A00001", detail:36, "money":13, "judge":1},
{year:"2021", car_no:"渝A00002", detail:33, "money":34, "judge":1},
{year:"2022", car_no:"渝A00003", detail:30, "money":23, "judge":3},
{year:"2023", car_no:"渝A00004", detail:45, "money":12, "judge":4},
{year:"2024", car_no:"渝A00005", detail:70, "money":22, "judge":6}
]
(3)column
columns: function(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;
},

方法
1.为handsontable添加钩子方法
addHook(key,callback):key为钩子方法名
addHookOnce(key,callback):添加只使用一次的方法,用完后自动删除
2.添加行或列,删除行或列
alter(action,index,amount,source,keepEmptyRows)
action:有4个值insert_row,insert_col,remove_row,remove_col
index:行索引,当存在时在索引处插入或删除,不存在时在当前行后插入
amount:默认值为1
source:行或列对象
keepEmptyRows:true/false,当值为true时,空行不被删除。
3.clear():清空表格数据
4.colOffset():获取可见的第一列的索引值
5.colToProp(col):返回给定索引列的列名,col为列索引
6.countCols():统计表格的所有列总数并返回
countRows():统计表格的总行数,并返回
7.countEmptyCols(ending):当ending的值为true时,统计所有空列的总数,返回总数显示再最右侧
countEmptyRows(ending):当ending的值为1时,统计所有空行总数,返回总数显示在最下方
8.countRenderedCols():统计并返回被渲染的列数
countRenderedRows():统计并返回被渲染的行数
9.countVisibleCols():统计并返回可见的列数,当返回-1时,表格不可见
countVisibleRows():统计并返回可见的行数,当返回-1时,表格不可见
10.deselectCell():取消当前被选中的单元格
11.destory():移除dom对象中的表格
12.destoryEditor(reverOriginal)
去除当前编辑器,并选中当前单元格,渲染上该效果。如果reverOriginal不是true则被编辑的数据将被保存,如果为true,则会恢复之前的数据,不保存新的数据到单元格。
13.getActiveEditor():返回一个活跃的编辑对象。
14.getCell(row.col,topmost):根据行列索引,获取一个被渲染的单元格,如果该单元格未被渲染则返回null
其中,row,col分别为行索引和列索引,topmost为表示是否是最上层,其值为true/false
15.getCellEditor():获取单元格的编辑器
16.getCellMeta(row,col):根据行列索引获取单元格的属性对象
17.getCellRenderer(row,col):根据单元格的行列索引获取单元格的渲染函数
18.getCellValidator():获取单元格的校验器
19.getColHeader(col):根据列索引获取列头名称
getRowHeader(row):根据行索引获取行头名称
20.getColWidth(col):根据列索引获取列宽
getRowHeight(row):根据行索引获取行高
21.getCoords(elem):获取元素的坐标
22.getCopyableData(startRow,startCol,endRow,endCol):获取指定范围的单元格数据
23.getData(row1,col1,row2,col2):获取指定范围的单元格的数据
24.getDataAtCell(row,col):根据行列索引获取单元格的值
25.getDataAtCol(col):根据列索引获取一列的数据
getDataAtRow(row):根据行索引获取一行的数据
26.getDataAtProp(prop):根据对象属性名获取相应的列的数据,prop为属性名
27.getDataAtRowProp(row,prop):根据行索引返回指定属性名的值
28.getInstance():获取一个handsontable实例
29.getPlugin(pluginName):根据插件名称获取一个插件实例
30.getSelected():获取被选中的单元格的索引数组,数组包括:startRow,stratCol,endRow,endCol4个值。
31.getSelectedRange():获取被选中的单元格的坐标
32.getSettings():获取对象的配置信息
33.getSourceDataAtCol(col):根据列号获取data source中的该列数据
getSourceDataAtRow(row):根据行号获取data source中的该行数据
34.getValue():获取所有被选中的单元格的值
35.hasColHeaders():返回是否存在列头
hasRowHeaders():返回是否存在行头
36.isEmptyCol(col):根据列索引判断该列是否为空
isEmptyRow(row):根据行索引判断该行是否为空
37.isListening():判断当前handsontable实例是否被监听
listen():监听body中的input框
unlisten():停止监听
38.loadData(data):加载本地数据
39.populateFormArray(start,input,end,source,method,direction,deltas):使用二维数组填充单元格
其中,start:开始位置

input:二维数组

end:结束位置

source:默认为populateFromArray

method:默认为overwrite

direction:left/right/top/bottom

deltas:其值为一个数组

populateFormArray(row,col,input,endRow,,endCol,source,method,direction,deltas)
40.propToCol(prop):返回给定属性名的列索引,prop为属性名
propToRow(prop):返回给定属性名的行索引,prop为属性名
41.removeCellMeta(row,col,key):根据行列索引移除指定的属性对象
42.removeHook(key,callback):移除钩子方法
43.render():渲染表格
44.rowOffset():获取第一个可见行的索引
45.setCellMeta(row,col,key,val):设置参数属性和值到指定行列的单元格
46.setCellMetaObject(row,col,prop):设置属性对象到指定的单元格
47.setDataAtCell(row,col,value,source):设置新值到一个单元格
48.setDataAtRowProp(row,prop,value,source):设置指定行的属性值为指定的值
49.updateSettings(setting,init):修改初始化的配置信息
50.validdateCells(callback):使用验证器验证所有单元格

handsontable整理的更多相关文章

  1. 在vue中使用handsontable

    1.使用npm安装 npm install handsontable @handsontable/vue 2.定义结构 <hot-table :settings="hotSetting ...

  2. dotNET跨平台相关文档整理

    一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...

  3. UWP学习目录整理

    UWP学习目录整理 0x00 可以忽略的废话 10月6号靠着半听半猜和文字直播的补充看完了微软的秋季新品发布会,信仰充值成功,对UWP的开发十分感兴趣,打算后面找时间学习一下.谁想到学习的欲望越来越强 ...

  4. SQL Server 常用内置函数(built-in)持续整理

    本文用于收集在运维中经常使用的系统内置函数,持续整理中 一,常用Metadata函数 1,查看数据库的ID和Name db_id(‘DB Name’),db_name('DB ID') 2,查看对象的 ...

  5. kafka学习笔记:知识点整理

    一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...

  6. JAVA程序员常用软件整理下载

    ********为了大家学习方便,特意整理软件下载如下:*************Java类软件:-------------------------------JDK7.0:http://pan.ba ...

  7. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  8. GJM : C#设计模式汇总整理——导航 【原创】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  9. 整理下.net分布式系统架构的思路

    最近看到有部分招聘信息,要求应聘者说一下分布式系统架构的思路.今天早晨正好有些时间,我也把我们实际在.net方面网站架构的演化路线整理一下,只是我自己的一些想法,欢迎大家批评指正. 首先说明的是.ne ...

随机推荐

  1. Spring Boot集成百度Ueditor

    遇到的问题: 1.将ueditor加入/static目录下,能正常显示,但是出现“请求后台配置项http错误,上传功能将不能正常使用!”(解决在下面,都是自定义上传的,如果需要官方的示例,我也无能为力 ...

  2. jQuery对象数据缓存Cache原理及jQuery.data详解

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几 ...

  3. 【02】GitHub 工具 Octotree

    #推荐一个 GitHub 工具 Octotree Chrome extension 它可以让你在看任何仓库时,获得一个左边的树状图.

  4. 大数据学习——mapreduce程序单词统计

    项目结构 pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&q ...

  5. POJ1780 Code

    KEY公司开发出一种新的保险箱.要打开保险箱,不需要钥匙,但需要输入一个正确的.由n位数字组成的编码.这种保险箱有几种类型,从给小孩子玩的玩具(2位数字编码)到军用型的保险箱(6位数字编码).当正确地 ...

  6. 【收藏】下载Chrome商店插件的方法,万恶的gwd

    以下是下载离线插件包的方法: 第一步: 每个Google Chrome扩展都有一个固定的ID,例如https://chrome.google.com/webstore/detail/bfbmjmiod ...

  7. [NOIP2002] 提高组 洛谷P1033 自由落体

    题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,….n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公式为 d=1/2*g* ...

  8. msp430项目编程05

    msp430中项目---TFT彩屏显示(续) 1.TFT彩屏工作原理 2.电路原理说明 3.代码(静态显示) 4.代码(动态显示) 5.项目总结 msp430项目编程 msp430入门学习

  9. python(5)- 基础数据类型

    一 int 数字类型 #abs(x) 返回数字的绝对值,如abs(-10) 返回 10 # ceil(x) 返回数字的上入整数,如math.ceil(4.1) 返回 5 # cmp(x, y) 如果 ...

  10. iOS-bug·Failed to connect to github-production-release-asset-2e65be.s3.amazonaws.com port 443: Operation time out

    在首次运行 react naticve 项目时, 遇到了如下的问题: Failed to connect to github-production-release-asset-2e65be.s3.am ...