html可编辑的excel表格控件,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

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

使用 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 中，rowHeader、colHeader 和 freezingCol 会 clone 主体部分内容，放在其兄弟节点。同时 edit 时的 input 会生成唯一一个 textarea。