资讯专栏INFORMATION COLUMN

Handsontable 类似 excel 表格编辑器

villainhr / 2175人阅读

摘要:原文发布于个人博客欢迎访问简介是一个类似表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置核心由原生编写,通过打包同类项目中,点赞最多,列表官网地址支持的特征的一些主要功能这里只列出主要功能,想了解更多更能,可以查询官方文档。这

原文发布于个人博客>>欢迎访问

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 实例

</>复制代码

  1. // 新建Hansontable实例
  2. var container = document.getElementById("dataGrid");
  3. var hot = new Handsontable(container, options); // options 如下

</>复制代码

  1. // Handsontable 的一些主要配置
  2. var options = {
  3. data: Array || Object, // data 是整个表格的数据源,可以接收一个二维数组,或者一个对象
  4. rowHeaders: Boolean || Array || function,
  5. colHeaders: Boolean || Array || function,
  6. cells: function, // row, col, prop
  7. stretchH: String, // "all", "none", "last",
  8. columns: Array || function,
  9. columnSorting: Boolean || Object,
  10. manualColumnResize: true,
  11. renderer: function,
  12. }

然后说一下上面每一个配置项的用法:

data
data 是整个表格的数据源,可以接收一个二维数组,或者一个对象

</>复制代码

  1. // 作为数组
  2. data = [
  3. ["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
  4. ["2012", 10, 11, 12, 13, 15, 16],
  5. ["2013", 10, 11, 12, 13, 15, 16],
  6. ["2014", 10, 11, 12, 13, 15, 16],
  7. ["2015", 10, 11, 12, 13, 15, 16],
  8. ["2016", 10, 11, 12, 13, 15, 16]
  9. ];
  10. // 相应配置(每一列显示哪些数据由columns决定)
  11. new Handsontable(container, {
  12. data: data,
  13. colHeaders: true,
  14. columns: [
  15. {data: 0},
  16. {data: 2},
  17. {data: 3},
  18. {data: 4},
  19. {data: 5},
  20. {data: 6}
  21. ]
  22. });
  23. // 作为对象数据
  24. data = [
  25. {id: 1, name: "Ted Right", address: ""},
  26. {id: 2, name: "Frank Honest", address: ""},
  27. {id: 3, name: "Joan Well", address: ""},
  28. {id: 4, name: "Gail Polite", address: ""},
  29. {id: 5, name: "Michael Fair", address: ""},
  30. ];
  31. new Handsontable(container5, {
  32. data: data,
  33. colHeaders: true,
  34. columns: [
  35. {data: "id"},
  36. {data: "name"},
  37. {data: "address"}
  38. ],
  39. });

rowHeaders
rowHeaders属性用来设置表格每一行的标题,有三种形式:

</>复制代码

  1. // 若为 true, 则行标题从1开始,依次往后
  2. {
  3. rowHeaders: true,
  4. }
  5. // 设置为数组, 则按数组内容显示
  6. {
  7. rowHeader: [1, 2, 3, 4, 5]
  8. }
  9. // 函数,接收一个index参数,更加灵活
  10. {
  11. rowHeader: function(index) {
  12. return index + "AB";
  13. }
  14. }

cells
cells属性用来设置每个单元格的属性

</>复制代码

  1. // 设置第一列只读
  2. {
  3. cells: function (row, col, prop) {
  4. var cellProperties = {};
  5. if (col === 0) {
  6. cellProperties.readOnly = true;
  7. }
  8. return cellProperties;
  9. }
  10. }

stretchH
stretchH 属性用来设置表格的展开方式,all 全列按最大宽度展开; none 紧缩的表格; last 最后一列展开

</>复制代码

  1. {
  2. stretchH: "all" // all 全列按最大宽度展开; none 紧缩的表格; last 最后一列展开
  3. }

columns
columns属性,用来定义列属性,也就是每一列需要显示数据源的哪个属性。除此之外,也可以定义每一列的数据属性,

</>复制代码

  1. {
  2. columns: [
  3. {data: "id"}, // 第一列显示 id 属性
  4. {data: "name"}, // 第二列显示 name 属性
  5. {data: "age", type: "numeric"}, // 第三列显示 age 属性,并且只能填数字
  6. {data: "address"} // 第四列显示 address 属性
  7. ],
  8. }

columnSorting
columnSorting 用来设置表格的列是否可排序,

renderer
renderer 属性可以自定义单元格的各种属性

</>复制代码

  1. // 第三行有数据的单元格涂色
  2. {
  3. renderer: function (instance, td, row, col, prop, value, cellProperties) {
  4. // 渲染为text类型,可选的有TimeRenderer、PasswordRenderer等不同的类型
  5. Handsontable.renderers.TextRenderer.apply(this, arguments);
  6. // 判断条件
  7. if (value && row === 2) {
  8. td.style.backgroundColor = "#e0ecff";
  9. }
  10. }
  11. }
事件

生成 Handsontable 实例之后,一张表格就显示好了,如果想加入更多交互效果,就需要注册监听事件。

</>复制代码

  1. // 实例对象
  2. var hot = new Handsontable(container, options);
  3. // 用实例方法addHook注册事件
  4. hot.addHook(key, callback); // key 为事件名
  5. // 除了addHook 方法之外,也可以将事件名,写入配置中
  6. {
  7. afterChange: function (change) {}
  8. }
常用事件

afterChange
afterChange 在单元格改变时触发,如编辑单元格之后,接收两个参数changeData, source

</>复制代码

  1. hot.addHook("afterChange", function (changeData, source) {
  2. // changeData 是一个数组,第一个元素(数组),记录所有修改信息
  3. if (!changeData) return;
  4. var change = changeData[0],
  5. row = change[0],
  6. colProp = change[1],
  7. preData = change[2],
  8. newData = change[3];
  9. })

afterOnCellMouseDown
afterOnCellMouseDown 在鼠标点击单元格之后触发

</>复制代码

  1. // afterOnCellMouseDown 在鼠标点击单元格之后触发,接收两个参数 event cellCoords
  2. // event 标准鼠标点击事件
  3. // cellCoords 对象,保存row,col信息
  4. hot.addHook("afterOnCellMouseDown ", function (event, cellCoords) {
  5. var row = cellCoords.row,
  6. col = cellCoords.col;
  7. })

afterBeginEditing
afterBeginEditing 在单元格开始编辑时触发

</>复制代码

  1. 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中,rowHeadercolHeaderfreezingCol会clone主体部分内容,放在其兄弟节点。同时,edit时的input会生成唯一一个textarea。

</>复制代码

原文发布于个人博客>>欢迎访问

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51011.html

相关文章

  • Handsontable 类似 excel 表格辑器

    摘要:原文发布于个人博客欢迎访问简介是一个类似表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置核心由原生编写,通过打包同类项目中,点赞最多,列表官网地址支持的特征的一些主要功能这里只列出主要功能,想了解更多更能,可以查询官方文档。这 原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器,支持丰富的展现和交互...

    ztyzz 评论0 收藏0
  • js-xlsx + handsontable + echarts实现excel上传编辑然后显示成图表

    摘要:生成报表数据都处理完了之后,就是生成报表了,报表这里稍微做的灵活了一点,是要让用户根据上传的数据,自己选择字段,然后用去生成对应的报表。 js-xlsx + handsontable + echarts 实现在前端导入excel数据并生成echart报表 前言 最近都在做类似 ERP 的项目,所以呢,又碰到一个比较变态的需求(至少对我来说是),在前端导入 excel 文件,然后在浏览器...

    joy968 评论0 收藏0
  • handsontable初步认知

    摘要:待更新左上角单元格赋值问题,通过改源码实现。下拉单元格高度修改,定位元素修改时下拉列表的最后一个显示不全,有。 hansontable简介 是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。 核心是由原生JavaScript构建,充分模块化,支持自定义build。 除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

    mrcode 评论0 收藏0
  • handsontable初步认知

    摘要:待更新左上角单元格赋值问题,通过改源码实现。下拉单元格高度修改,定位元素修改时下拉列表的最后一个显示不全,有。 hansontable简介 是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。 核心是由原生JavaScript构建,充分模块化,支持自定义build。 除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

    wslongchen 评论0 收藏0
  • 独立开发变现周刊(第28期):一个JavaScript组件做到了150万美金收入

    摘要:分享独立开发产品变现相关有价值的内容,每周五发布。团队认为做网站评论和与其它团队的协作是复杂的,对于这个过程没有真正的解决方案。官网实现美金收入的步骤个月前,我创建了自己的第一个账户,年月日。当我把它放到上时,得到了一些最初的关注。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size...

    channg 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<