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

无主题博客 » 前端开发 » Web前端仿Excel表格编辑组件Handsontable

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

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

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

简单示例

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Handsontable</title>
  <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>

常规配置API

1.固定行列位置

属性 类型 含义
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://handsontable.com/

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注