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. 杭电 5326 Work (并查集求子结点为k的结点数)

    Description It’s an interesting experience to move from ICPC to work, end my college life and start ...

  2. Spring MVC中使用Swagger生成API文档和完整项目示例Demo,swagger-server-api

    本文作者:小雷FansUnion-一个有创业和投资经验的资深程序员-全球最大中文IT社区CSDN知名博主-排名第119   实际项目中非常需要写文档,提高Java服务端和Web前端以及移动端的对接效率 ...

  3. xtu字符串 A. Babelfish

    A. Babelfish Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class ...

  4. HDU-5532//2015ACM/ICPC亚洲区长春站-重现赛-F - Almost Sorted Array/,哈哈,水一把区域赛的题~~

    F - Almost Sorted Array Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  5. Codeforces936D. World of Tank

    $n \leq 1e9$,$n*2$的网格里有$m_1+m_2 \leq 1e6$个障碍物,现有一坦克从$(0,1)$出发要到$(n+1,1/2)$,他每秒可以换行(纵坐标1变2或2变1)也可以发炮弹 ...

  6. cobbler ks文件解释--转载

    cobbler中ks.cfg文件配置详解        许多系统管理员宁愿使用自动化的安装方法来安装红帽企业 Linux.为了满足这种需要,红帽创建了kickstart安装方法.使用kickstart ...

  7. winServer-常用winrm命令

    学习WinServer必须学习powershell,学习powershell必须掌握远程管理服务器的方法,所以必须学会winrm来远程管理服务器 记录一些常用的winrm命令和错误 常用命令 //在P ...

  8. POJ 1502 水 dij

    题意:给N,表示N个节点. 给半个邻接矩阵,本身到本身的距离是0,边是双向的.当两个节点之间没有直接的边连接的时候,用x表示. 问从第一个节点到其他所有节点至少花费的时间. 这题唯一的处理是处理邻接矩 ...

  9. Java连接MySQL报错:CommunicationsException: Communications link failure

    现象: 报错:Exception in thread "main" com.mysql.cj.jdbc.exceptions.CommunicationsException: Co ...

  10. canvas跟随页面滑动后准确定位到真实坐标

    先来了解一个属性: getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var ...