新浪博客

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

2016-03-24 17:07阅读：

http://blog.sina.cn/dpool/blog/u/1454773960

此文转载自：https://wuzhuti.cn/2505.html web前端仿Excel表格编辑组件Handsontable
Handsontable是使用Excel一样的外观数据网格组件。建在JavaScript中，它与最高效率的任何数据源的集成。它配备了强大的功能，如数据验证，排序，分组，数据绑定，公式支持或列顺序。
官网主页，给出了一个10万个数据的加载演示，速度那是非常非常快。我测试过最多的数据是10M的CSV数据，忽略网络传输耗时，加载速度也是毫秒级。
HandsonTable是目前为止，本人见过效率最高、功能最强的前端表格处理组件。

简单示例

使用HandsonTable只需要简单的两个步骤：
  1. 引入Handsontable 的CSS文件和JS文件。
  2. 调用Handsontable代码
[html] 预览复制

  1. >
  2. <</span>html>
  3. <</span>head>
  4. <</span>title>Handsontable</</span>title>
  5. <</span>script src='/dist/handsontable.full.js'></</span>script>
  6. <</span>link rel='stylesheet' href='/dist/handsontable.full.css' />
  7. </</span>head>
  8. <</span>body>
  9. <</span>div id='example'> </</span>div>
  10. <</span>script>
  11. var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
  12. var container = document.getElementById('example');
  13. var hot = new Handsontable(container, {
  14. data: data
  15. });
  16. </</span>script>
  17. </</span>body>
  18. </</span>html>

常规配置API

1.固定行列位置

属性 类型 含义
fixedRowsTop int 行数：固定顶部多少行不能垂直滚动
fixedColumnsLeft int 列数：固定左侧多少列不能水平滚动
[js] 预览复制
  1. var hot = new Handsontable(el,{
  2. data: data,
  3. fixedRowsTop : 1, //固定首行
  4. fixedColumnsLeft : 2 //固定前两列
  5. });

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

属性 类型 含义
manualRowResize boolean 行拖动：当值为true时，允许拖动，当为false时禁止拖动
manualColumnResize boolean 列拖动：当值为true时，允许拖动，当为false时禁止拖动
[js] 预览复制
  1. var hot = new Handsontable(el,{
  2. data: data,
  3. manualRowResize : true, //允许行拖动
  4. manualColumnResize : false //禁止列拖动
  5. });

3.延伸列的宽度

属性 类型 含义
stretchH string last：延伸最后一列，all：延伸所有列，none默认不延伸
[js] 预览复制
  1. var hot = new Handsontable(el,{
  2. data:data,
  3. stretchH: all //延伸所有列
  4. });

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 控制行列分组
[js] 预览复制
  1. var hot = new Handsontable(el,{
  2. data:data,
  3. groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
  4. });

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

8.允许排序

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

[js] 预览复制
  1. hot.updateSettings({
  2. columnSorting:false
  3. });

排序的使用也可已直接调用sort()方法实现。如下操作：
[js] 预览复制
  1. if(hot.sortingEnabled){
  3. hot.sort([行数], true/false);
  4. //true为升序，false为降序
  6. }

9.显示行头列头

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

10.数据显示

属性 类型 含义
data array 表格数据
columns array 控制表格数据数组中显示的列
获取数据的方法：
[js] 预览复制
  1. hot.getData();

加载数据的方法：
[js] 预览复制
  1. hot.loadData(data);

当不需要显示某一

我的更多文章

下载客户端阅读体验更佳

APP专享