码途山海.智隐长卷»技术记录 › 程序员 › 前端开发 › web前端仿Excel表格编辑组件Handsontable

lzg

2308 积分	0 好友	259 主题

发消息

web前端仿Excel表格编辑组件Handsontable

楼主

发表于 2017-3-19 23:10:14 | 查看: 2720| 回复: 0

Handsontable是使用Excel一样的外观数据网格组件。建在JavaScript中，它与最高效率的任何数据源的集成。它配备了强大的功能，如数据验证，排序，分组，数据绑定，公式支持或列顺序。

官网主页，给出了一个10万个数据的加载演示，速度那是非常非常快。我测试过最多的数据是10M的CSV数据，忽略网络传输耗时，加载速度也是毫秒级。

HandsonTable是目前为止，本人见过效率最高、功能最强的前端表格处理组件。

简单示例

使用HandsonTable只需要简单的两个步骤：

引入Handsontable 的CSS文件和JS文件。
调用Handsontable代码

<html>
<head>
<title>Handsontabletitle>
<script src="/dist/handsontable.full.js">script>
<link rel="stylesheet" href="/dist/handsontable.full.css" />
head>
<body>
<div id="example"> div>
<script>
var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
var container = document.getElementById("example");
var hot = new Handsontable(container, {
data: data
});
script>
body>
html>

常规配置API1.固定行列位置

属性	类型	含义
fixedRowsTop	int	行数：固定顶部多少行不能垂直滚动
fixedColumnsLeft	int	列数：固定左侧多少列不能水平滚动

var hot = new Handsontable(el,{
data: data,
fixedRowsTop : 1, //固定首行
fixedColumnsLeft : 2 //固定前两列
});

2.拖动行头或列头改变行或列的大小

属性	类型	含义
manualRowResize	boolean	行拖动：当值为true时，允许拖动，当为false时禁止拖动
manualColumnResize	boolean	列拖动：当值为true时，允许拖动，当为false时禁止拖动

var hot = new Handsontable(el,{
data: data,
manualRowResize : true, //允许行拖动
manualColumnResize : false //禁止列拖动
});

3.延伸列的宽度

属性	类型	含义
stretchH	string	last：延伸最后一列，all：延伸所有列，none默认不延伸

var hot = new Handsontable(el,{
data:data,
stretchH: all //延伸所有列
});

4.手动固定某一列

属性	类型	含义
manualColumnFreeze	boolean	控制菜单是否显示固定选项

说明：当值为true时，选中某一列，右键菜单会出现freeze this column选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。

5.拖动行或列到某一行或列之后

属性	类型	含义
manualColumnMove	boolean	当值为true时，列可拖拽移动到指定列
manualRowMove	boolean	当值为true时，行可拖拽至指定行

说明：当属性的值为true时，行头或列头可以被拖拽移动，移动后该行或列将会被移动到指定位置，原先该行或列的后面部分自动上移或后退。移动的时候鼠标需选中行线或列线才行。

6.设置当前行或列的样式

属性	类型	含义
currentRowClassName	string	当前行样式的名称
currentColClassName	string	当前列样式的名称

7.行分组或列分组

属性	类型	含义
groups	array	控制行列分组

var hot = new Handsontable(el,{
data:data,
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
});

上面的例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。

8.允许排序

属性	类型	含义
columnSorting	boolean/object	当值为true时，表示启用排序插件

当值为true时，排序插件的使用可通过点击列头文字实现。当值为false时表示禁用排序。当值为对象时，该对象包含两个属性：column：列数。sortOrder：true/false，升序或降序，true为升序排列。当用对象启动插件后可用如下方式禁用插件：

hot.updateSettings({
columnSorting:false
});

排序的使用也可已直接调用sort()方法实现。如下操作：

if(hot.sortingEnabled){
hot.sort([行数], true/false);
//true为升序，false为降序
}

9.显示行头列头

属性	类型	含义
colHeaders	boolean/array	当值为true时显示列头，当值为数组时，列头为数组的值
rowHeaders	boolean/array	当值为true时显示行头，当值为数组时，行头为数组的值

10.数据显示

属性	类型	含义
data	array	表格数据
columns	array	控制表格数据数组中显示的列

获取数据的方法：

hot.getData();

加载数据的方法：

hot.loadData(data);

当不需要显示某一列的时候可用如下格式设置：

columns：[
{data:0},
{data:2}
]
//这里就不显示第二列数据，只有第1、3列数据

11.右键菜单显示

属性	类型	含义
contextMenu	boolean/array	控制右键菜单是否显示或显示内容

//显示菜单
var hot = new Handsontable(el,{
data:data,
contextMenu:true
});
//显示指定菜单
var hot = new Handsontable(el,{
data: data,
contextMenu: ['row_above', 'row_below', 'remove_row']
});

菜单可选值

官方文档：http://docs.handsontable.com/0.20.2/demo-context-menu.html

##稍后整理##

12.自适应列大小

属性	类型	含义
autoColumnSize	boolean	当值为true且列宽未设置时，自适应列大小

13.表格样式选项

属性	类型	含义
width	int	宽度
height	int	高度

参考文章：http://blog.csdn.net/mafan121/article/details/46050049

官网地址：http://handsontable.com/

演示地址：http://handsontable.com/examples.html

回复 支持0 反对0

收藏0 回复只看该作者道具举报

返回列表

		自动登录	找回密码
密码			立即注册

web前端仿Excel表格编辑组件Handsontable

浏览过的版块