Handsontable 给力的仿Excel JQuery插件

转自 http://blog.csdn.net/MarseilleEE/article/details/53433962

• Handsontable 是一个相当给力的 jQuery 插件，它实现了 HTML 页面中的表格编辑功能，并且是仿 Excel 的编辑效果。
• 在 Excel 中可进行的操作，你几乎都可以在网页中做到，如拖动复制、Ctrl+C 、Ctrl+V 等等。
• 另外在浏览器支持方面，它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera。
• 快速启动
  
• 1、首先在页面中引入 jQuery 框架和 Handsontable 插件的相关 JS 和 CSS 文件，以下列出的两个是必要的，还有其它的是可选的，如果需要某个功能时就（参看demo）加上。
• 
  
  
• 注意：插件引用要放在head中，否则内容不显示
• 2、添加一个用于呈现 Excel 编辑表格的 DIV 层

3、 最后就可以对其进行初始化了

数据显示

data：[[第一行数据],[第二行数据],...[第n行数据]]/对象数组

获取数据的方法：hot.getData()。

加载数据的方法：hot.loadData(data)。

当不需要显示某一列的时候可用如下格式设置：columns：[{data:0},{data:2}]

//自动创建数据

data: Handsontable.helper.createSpreadsheetData(20, 10),

Ｈandsontable API

一：常规设置

1：冻结行列

1.1：fixedRowsTop　冻结行（固定顶部开始算起指定行不随垂直滚动条滚动；

1.2：fixedColumnsLeft　冻结列（固定右边开始算起指定行不随水平滚动条滚动）；

2：显示表头

2.1：colHeaders:true　显示列表头， 默认false， 可取 true/fals/数组 ，当值为数组时，列头为数组的值

2.2：rowHeaders:true　显示行表头， 默认 false， 可取 true/fals/数组，当值为数组时，行头为数组的值

3：允许通过拖曳行表头/列表头来改变行列的大小

3.1： manualColumnResize:true 允许拖曳列表头，默认为false

3.2： manualRowResize:true 允许拖曳行表头，默认为false

4：显示表头下拉菜单  (右键可用，默认为undefined)

4.1： contextMenu:true 显示表头的下拉菜单默认false 可取 true/false/自定义数组

5：手动设置冻结列(冻结的列会前置)

5.1：manualColumnFreeze:true  设置true后在单元格中右击出现一个菜单，此菜单会多出一个“Unfteeze this columu”的选项，再次点击就会取消冻结动作。 默认为false

6：给当前行/列的一个样式名

6.1：currentRowClassName:"cur" 给当前行设置样式名（鼠标点击某个单元格，则整行给样式）

6.2：currentColClassName:"cur" 给当前行列设置样式名（鼠标点击某个单元格，则整行给样式）

7：排序

7.1：columnSorting:true 通过点击列表头进行排序（没有图标）

当值为true时，表示启用排序插件

当值为true时，排序插件的使用可通过点击列头文字实现。

当值为false时表示禁用排序。当值为对象时，

该对象包含两个属性：column：列数。

sortOrder：true/false，升序或降序，true为升序排列。

当用对象启动插件后可用如下方式禁用插件：

hot.updateSettings({

     columnSorting:false

});

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

if(hot.sortingEnabled){

     hot.sort(行数，true/false);

     //true为升序，false为降序

}

8：自适应列大少

8.1：autoColumnSize:true true/false //当值为true且列宽未设置时，自适应列大小

9：启用observeChanges插件

9.1：observeChanges：true/false //当值为true时，启用observeChanges插件

10：设置列宽

10.1：colWidths:[10,5,50],

10.2: 设置行的宽度，第四行是默认的
    rowHeights: [50, 40, 100],

11：延伸列的宽度

11.1：stretchH:"last"  可取 last/all/none last：延伸最后一列，all：延伸所有列，none默认不延伸。 

12：行分组或列分组

12.1:groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]

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

13：拖动行或列到某一行或列之后

13.1:manualColumnMove：true/false 当值为true时，列可拖拽移动到指定列

13.2:manualRowMove:true/false当值为true时，行可拖拽至指定行

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

注意：

比如你移动的是列，

那么请你把鼠标放到列表头中，当出现一个手型时候可以拖动，拖动的只是数据，列表头不会跟着移动。

14：合并的列

mergeCells: [

      //{ row: 0, col: 0, rowspan: 2, colspan: 2 },

      { row: 2, col: 0, rowspan: 19, colspan: 1 },

      { row: 0, col: 2, rowspan: 1, colspan: 9 }

 ],

15：需要修改

columns:[

      {readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true}

],

其他

minCols：最小列数

minRows：最小行数

minSpareCols：添加空列

maxCols：最大列数

maxRows：最大行数

minSpareRows：添加空行

方法

为了获取这个handsontable对象，我们换一种方式初始化

var container = document.getElementById('example');
var hot = new Handsontable(container, { data: data });
console.log(hot)

打印出来后，我们可以看到它提供的方法

对象.方法（参数）

例：hot.alter(‘insert_row‘,0,2,‘ ‘,true);

1：添加行或列，删除行或列

alter (action,index,amount,source,keepEmptyRows)

action:有4个值insert_row，insert_col，remove_row，remove_col

index：行索引，当存在时在索引处插入或删除，不存在时在当前行后插入

amount：默认值为1表示插入多少行/列

source：行或列对象

keepEmptyRows：true/false，当值为true时，空行不被删除。

2：清空表数据

clear()

3：统计表格的所有列总数并返回

3.1：  countRows():统计表格的总行数，并返回

console.log(hot.countCols())

4：取消当前被选中的单元格

deselectCell()

5：移除dom对象中的表格

destory()

6：去除当前编辑器，并选中当前单元格，渲染上该效果

destoryEditor(reverOriginal)

去除当前编辑器，并选中当前单元格，渲染上该效果。如果reverOriginal不是true则被编辑的数据将被保存，如果为true，则会恢复之前的数据，不保存新的数据到单元格。

7：返回一个活跃的编辑对象。

getActiveEditor()

8：根据行列索引获取单元格的值

getCopyableData(startRow,startCol,endRow,endCol)

9.为handsontable添加钩子方法
addHook(key,callback):key为钩子方法名

• 例如：hot.addHook('beforeInit', myCallback);  

addHookOnce(key,callback)：添加只使用一次的方法，用完后自动删除

• 例如：hot.addHookOnce('beforeInit', myCallback);  

10.获取可见的第一列的索引值

colOffset()

11.返回给定索引列的列名，col为列索引

colToProp(col)

12.countEmptyCols(ending)：当ending的值为true时，统计所有空列的总数，返回总数显示再最右侧

countEmptyRows(ending):当ending的值为1时，统计所有空行总数，返回总数显示在最下方

13.countRenderedCols():统计并返回被渲染的列数

countRenderedRows():统计并返回被渲染的行数

14.countVisibleCols():统计并返回可见的列数，当返回-1时，表格不可见

   countVisibleRows():统计并返回可见的行数，当返回-1时，表格不可见

15.deselectCell():取消当前被选中的单元格

16.getCell(row.col,topmost):根据行列索引，获取一个被渲染的单元格，如果该单元格未被渲染则返回null

其中，row,col分别为行索引和列索引，topmost为表示是否是最上层，其值为true/false

15.getCellEditor():获取单元格的编辑器

16.getCellMeta(row,col):根据行列索引获取单元格的属性对象

17.getCellRenderer(row,col)：根据单元格的行列索引获取单元格的渲染函数

18.getCellValidator()：获取单元格的校验器

19.getColHeader(col):根据列索引获取列头名称

     getRowHeader(row):根据行索引获取行头名称
20.getColWidth(col):根据列索引获取列宽

     getRowHeight(row):根据行索引获取行高
21.getCoords(elem):获取元素的坐标

22.getCopyableData(startRow,startCol,endRow,endCol):获取指定范围的单元格数据

23.getData(row1,col1,row2,col2):获取指定范围的单元格的数据

24.getDataAtCell(row,col):根据行列索引获取单元格的值

25.getDataAtCol(col)：根据列索引获取一列的数据

     getDataAtRow(row)：根据行索引获取一行的数据
26.getDataAtProp(prop):根据对象属性名获取相应的列的数据,prop为属性名

27.getDataAtRowProp(row,prop):根据行索引返回指定属性名的值

28.getInstance():获取一个handsontable实例

29.getPlugin(pluginName):根据插件名称获取一个插件实例

30.getSelected():获取被选中的单元格的索引数组，数组包括：startRow，stratCol，endRow，endCol4个值。

31.getSelectedRange():获取被选中的单元格的坐标

32.getSettings():获取对象的配置信息

33.getSourceDataAtCol(col):根据列号获取data source中的该列数据

    getSourceDataAtRow(row):根据行号获取data source中的该行数据
34.getValue():获取所有被选中的单元格的值

35.hasColHeaders():返回是否存在列头

  hasRowHeaders():返回是否存在行头

36.isEmptyCol(col):根据列索引判断该列是否为空

     isEmptyRow(row):根据行索引判断该行是否为空

37.isListening():判断当前handsontable实例是否被监听

     listen():监听body中的input框

     unlisten():停止监听

38.loadData(data)：加载本地数据

39.populateFormArray(start,input,end,source,method,direction,deltas):使用二维数组填充单元格

其中，start:开始位置

            input：二维数组

            end：结束位置

            source：默认为populateFromArray

            method：默认为overwrite

            direction：left/right/top/bottom

            deltas:其值为一个数组

populateFormArray(row,col,input,endRow,,endCol,source,method,direction,deltas)

40.propToCol(prop):返回给定属性名的列索引，prop为属性名

     propToRow(prop):返回给定属性名的行索引，prop为属性名

41.removeCellMeta(row,col,key):根据行列索引移除指定的属性对象

42.removeHook(key,callback):移除钩子方法

43.render():渲染表格

44.rowOffset():获取第一个可见行的索引

45.setCellMeta(row,col,key,val)：设置参数属性和值到指定行列的单元格

46.setCellMetaObject(row,col,prop):设置属性对象到指定的单元格

47.setDataAtCell(row,col,value,source)：设置新值到一个单元格

48.setDataAtRowProp(row,prop,value,source):设置指定行的属性值为指定的值

49.updateSettings(setting,init)：修改初始化的配置信息

50.validdateCells(callback):使用验证器验证所有单元格