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）加上。
• <script src="jquery.min.js"></script>
  <script src="handsontable.full.js"></script>
  <link rel="stylesheet" href="handsontable.full.css">
• 注意：插件引用要放在head中，否则内容不显示
• 2、添加一个用于呈现 Excel 编辑表格的 DIV 层
• <div id="example" ></div>
• 3、 最后就可以对其进行初始化了
• <script>
      var data = [//四行五列
             ["", "Kia", "Nissan", "Toyota", "Honda"],
             ["2008", 10, 11, 12, 13],
             ["2009", 20, 11, 14, 13],
             ["2010", 30, 15, 12, 13]
      ];
      $("#example").handsontable({
             data: data,//初始化时候的数据
             minSpareRows:5,//空出多少行
             colHeaders:true,//显示表头
             contextMenu:true//显示表头下拉菜单
      })
  </script>
• 
  
• 数据显示
• 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为钩子方法名
• • <span style="font-size:18px;">例如：hot.addHook('beforeInit', myCallback);</span>  
• addHookOnce(key,callback)：添加只使用一次的方法，用完后自动删除
• • <span style="font-size:18px;">例如：hot.addHookOnce('beforeInit', myCallback);</span>  
• 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):使用验证器验证所有单元格