Handsontable 类似 excel 表格编辑器
HandsonTable 简介
- Handsontable 是一个类似 excel 表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置
- 核心由原生 js (es6) 编写,通过webpack打包
- 同类 Jspreadsheets 项目中,点赞最多,Jspreadsheets列表
- 官网地址
HandsonTable 支持的特征
Handsontable 的一些主要功能:
- edit
- Context menu
- Drag-down
- Dropdown
- Freezing
- Merge cells
- Comments
- Data validation
- Custom HTML
- sortingtable
这里只列出主要功能,想了解更多更能,可以查询官方文档。这里附一张官方demo图:
如何实现一个handsontable
Handsontable 的核心可以分为配置,事件,方法三个方面:
配置
- 引入handsontable包,
- new 一个 Handsontable 实例
// 新建Hansontable实例
var container = document.getElementById('dataGrid');
var hot = new Handsontable(container, options); // options 如下
// Handsontable 的一些主要配置
var options = {data: Array || Object, // data 是整个表格的数据源,可以接收一个二维数组,或者一个对象rowHeaders: Boolean || Array || function,colHeaders: Boolean || Array || function,cells: function, // row, col, propstretchH: String, // 'all', 'none', 'last',columns: Array || function,columnSorting: Boolean || Object,manualColumnResize: true,renderer: function,
}
然后说一下上面每一个配置项的用法:
data
data 是整个表格的数据源,可以接收一个二维数组,或者一个对象
// 作为数组
data = [['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],['2012', 10, 11, 12, 13, 15, 16],['2013', 10, 11, 12, 13, 15, 16],['2014', 10, 11, 12, 13, 15, 16],['2015', 10, 11, 12, 13, 15, 16],['2016', 10, 11, 12, 13, 15, 16]];// 相应配置(每一列显示哪些数据由columns决定)
new Handsontable(container, {data: data,colHeaders: true,columns: [{data: 0},{data: 2},{data: 3},{data: 4},{data: 5},{data: 6}]}); // 作为对象数据
data = [{id: 1, name: 'Ted Right', address: ''},{id: 2, name: 'Frank Honest', address: ''},{id: 3, name: 'Joan Well', address: ''},{id: 4, name: 'Gail Polite', address: ''},{id: 5, name: 'Michael Fair', address: ''},];new Handsontable(container5, {data: data,colHeaders: true,columns: [{data: 'id'},{data: 'name'},{data: 'address'}],});
rowHeaders
rowHeaders属性用来设置表格每一行的标题,有三种形式:
// 若为 true, 则行标题从1开始,依次往后
{rowHeaders: true,
}// 设置为数组, 则按数组内容显示
{rowHeader: [1, 2, 3, 4, 5]
}// 函数,接收一个index参数,更加灵活
{rowHeader: function(index) {return index + 'AB';}
}
cells
cells
属性用来设置每个单元格的属性
// 设置第一列只读
{cells: function (row, col, prop) {var cellProperties = {};if (col === 0) {cellProperties.readOnly = true;}return cellProperties;}
}
stretchH
stretchH
属性用来设置表格的展开方式,all
全列按最大宽度展开; none
紧缩的表格; last
最后一列展开
{stretchH: 'all' // all 全列按最大宽度展开; none 紧缩的表格; last 最后一列展开
}
columns
columns
属性,用来定义列属性,也就是每一列需要显示数据源的哪个属性。除此之外,也可以定义每一列的数据属性,
{columns: [{data: 'id'}, // 第一列显示 id 属性{data: 'name'}, // 第二列显示 name 属性{data: 'age', type: 'numeric'}, // 第三列显示 age 属性,并且只能填数字{data: 'address'} // 第四列显示 address 属性],
}
columnSorting
columnSorting
用来设置表格的列是否可排序,
renderer
renderer
属性可以自定义单元格的各种属性
// 第三行有数据的单元格涂色
{renderer: function (instance, td, row, col, prop, value, cellProperties) {// 渲染为text类型,可选的有TimeRenderer、PasswordRenderer等不同的类型Handsontable.renderers.TextRenderer.apply(this, arguments);// 判断条件if (value && row === 2) {td.style.backgroundColor = '#e0ecff';}}
}
事件
生成 Handsontable 实例之后,一张表格就显示好了,如果想加入更多交互效果,就需要注册监听事件。
// 实例对象
var hot = new Handsontable(container, options);// 用实例方法addHook注册事件
hot.addHook(key, callback); // key 为事件名// 除了addHook 方法之外,也可以将事件名,写入配置中
{afterChange: function (change) {}
}
常用事件
afterChange
afterChange
在单元格改变时触发,如编辑单元格之后,接收两个参数changeData
, source
hot.addHook('afterChange', function (changeData, source) {// changeData 是一个数组,第一个元素(数组),记录所有修改信息if (!changeData) return;var change = changeData[0],row = change[0],colProp = change[1],preData = change[2],newData = change[3];
})
afterOnCellMouseDown
afterOnCellMouseDown
在鼠标点击单元格之后触发
// afterOnCellMouseDown 在鼠标点击单元格之后触发,接收两个参数 event cellCoords
// event 标准鼠标点击事件
// cellCoords 对象,保存row,col信息hot.addHook('afterOnCellMouseDown ', function (event, cellCoords) {var row = cellCoords.row,col = cellCoords.col;
})
afterBeginEditing
afterBeginEditing
在单元格开始编辑时触发
hot.addHook('afterBeginEditing', function (row, col) {})
方法
getCell
getCell(row, col)
获取指定单元格
alter
alter(action, index, amount, source, keepEmptyRows)
alter方法用于改变表格结构,即插入或删除行列数据。
action
可用改变表格结构操作insert_row、insert_col、remove_row、remove_col
index
行列索引值,从0开始,insert操作将插入到该索引值的前一行/列
amount
(可选,默认1):将要插入/删除的行列数
source
(可选):行或列对象
keepEmptyRows
(可选):防止删除空行,true/false
setDataAtCell
setDataAtCell(row, col, value, source)
设置某个单元格的数据
row
行号索引
col
列号索引
value
将要设置的单元格数据
source
(可选)字符串标识中描述这一变化将如何改变数组(用于onAfterChange或onBeforeChange回调)
生成的html结构
如下代码所示,生成的表格主体在ht_master
中,rowHeader
、colHeader
和freezingCol
会clone主体部分内容,放在其兄弟节点。同时,edit时的input会生成唯一一个textarea。
<div id="handsonTable"><div class="ht_master"></div> <!-- table 主体 --><div class="ht_clone_top"></div> <!-- column header clone --><div class="ht_clone_left"></div> <!-- freezing left clone --><div class="ht_clone_top_left_corner"></div> <!-- freezing column top clone --><div class="handsontableInputHolder"></div> <!-- edit textarea -->
</div>
Handsontable 类似 excel 表格编辑器相关推荐
- 基于UGUI实现类似Excel表格功能
曾经有一个类似这种需求,想在Unity中实现类似Excel表中的一个功能,能在Scene窗口中"新增行"."可视化配置"."所见所得".&q ...
- python中读取txt文本文件为类似excel表格的形式(包括用空格分割的文件)
在一些txt文件中,数据以类似表格的形式存在,如下图: 在处理这些数据的时候,我们想把它读取为类似与表格的行和列组成的文件.但是普通的txt文件读取操作readline() 和readlines()等 ...
- 使用canvas画类似excel表格
思路 先把表格分成3个canvas来画, 因为 excel表的左边和上面都是跟随内容来移动 通过oniscroll 事件来进行联动 如果需要再进行导出excel ,可以使用JsonExportExce ...
- Android 实现类似Excel表格,且表格能左右、上下滑动,可修改分割线颜色
参考https://www.cnblogs.com/begin1949/p/5910785.html 1.自定义实现一个水平滚动控件HorizontalScrollView import androi ...
- php怎么把网页生成excel,php网页表格生成excel表格数据-php怎么把数据生成excel表格...
php导出生成excel表格几种方法介绍 这属于php的技术: php可以用PHPExcel直接导出成excel文件: 代码如下: require_once("../lib/excelcre ...
- Android实现Excel表格样式
原理描述: 想写来着,但是似乎描述不太清楚.效果图来着,没找到好的视频录制软件,直接上代码吧. 代码: 1.xml布局文件 自定义控件的包名删除了部分,需要重新导入自定义控件!!! <?xml ...
- 利用FarPoint Spread表格控件,构造Winform的Excel表格界面输入
因有一个业务需要在Winform界面中,以类似Excel表格界面中录入相关的数据(毕竟很多时候,客户想利用成熟的软件体验来输入他们想要的东西),其中界面需要录入基础信息,列表信息,图片信息等,综合这些 ...
- java删除数据库表格,《Java:数据库更新excel文件的数据同时删除数据库原来的数据》 excel表格如何删除相同数据库...
Java:数据库更新excel文件的数据同时删除数据库原来的数据 重新写入blob的byte[],就可以覆盖了....... excel表格怎么检查有重复的数据库 方/步骤 打开需要编辑的Excel表 ...
- 【React】类excel表格的开源项目handsontable
前言 最近在浏览时发现了一个开源项目handsontable,功能相当强大. 虽然handsontable是dom做的,但是不妨碍其类似于canvas那种excel的操作手感. 官网 https:// ...
最新文章
- android悬浮窗按钮在哪,android——悬浮窗控件Toast
- python 爬虫 记录
- 安阳工学院计算机二级成绩查询,2008年下半年计算机等级考试成绩可以查询了?...
- using(别名)和range based for
- Java面向对象(3.1)--方法的重载,可变个数的形参,值传递机制,递归
- 《设计模式之禅》学习笔记(九)
- 原理图框图_GW1N9芯片测评之GW1N Zero原理图、3D模型及PCB设计(二)
- CAT - 监控平台之装配篇
- 排序算法之 归并排序
- java 请求 https_JAVA后端请求HTTPS 的URL 遇到的问题
- CentOS 6.5 中安装Jenkins
- 嵌入式C编程中的设计模式之二——状态机模式
- android 经纬度方向,Android获取经纬度计算距离介绍
- 使用python绘制一个太阳花代码_如何绘制多样化的太阳花?
- 【颜纠日记】祛痘广告那么神?分享确切的祛痘方式。
- python数据分析教程百度云资源-【python数据分析+pdf】百度云下载 - 云盘精灵
- html如何设置table的宽度,HTML怎么设置table宽度
- PS更新升级Adobe Camera Raw(ACR)15.3
- 【数据结构】图1——图的基本概念和术语、类型定义
- 赋能 打造应对不确定性的敏捷团队 pdf_《创业书影音》本期推荐《赋能》
热门文章
- oracle改成归档模式_将Oracle数据库改为归档模式并启用Rman备份
- java数组求和函数_令人头痛的表格函数,今天送你11个常用技巧,一次学会受用一生...
- linux nfs限制连接数,linux – 对NFS有一个有效的稳定性参数吗?
- vue和哪个php框架搭配,vue配什么ui框架比较好
- java登录抓取网页_java模拟登录内部系统抓取网页内容
- 生物计算机的发展和应用,计算机的发展及其在生物医学中的应用
- 顺序执行命令需要哪个符号链接_18年MBA联考如何安排答题时间及顺序
- java订单重复提交_java表单重复提交常用解决办法
- 是以微型计算机为中心 配以相应的外围设备,______是以微型计算机为中心,配以相应的外围设备、电源和辅助电路,以及指挥微型计算机工作的系统软件而构成的。...
- java除了android,Java中是否有类似android中的android.os.Handler的类?