Handsontable 现在版的 Excel 表格编辑器插件

发布于 2020-09-22 21:43:04 字数 7381 浏览 1596 评论 0

HandsonTable 简介

  1. Handsontable 是一个类似 Excel 表格编辑器,支持丰富的展现和交互,以及多样的单元格展现和配置
  2. 核心由原生 js (es6) 编写,通过 webpack 打包
  3. 同类 Jspreadsheets 项目中,点赞最多,Jspreadsheets列表
  4. 官网地址

HandsonTable 支持的特征

Handsontable 的一些主要功能:

  1. edit
  2. Context menu
  3. Drag-down
  4. Dropdown
  5. Freezing
  6. Merge cells
  7. Comments
  8. Data validation
  9. Custom HTML
  10. sortingtable

这里只列出主要功能,想了解更多更能,可以查询官方文档。

使用 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, prop
    stretchH: 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 中,rowHeadercolHeader 和 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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。