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 允许拖曳列表头，默认为false3.2： manualRowResize:true 允许拖曳行表头，默认为false4：显示表头下拉菜单 (右键可用，默认为undefined)4.1： contextMenu:true 显示表头的下拉菜单默认false 可取 true/false/自定义数组5：手动设置冻结列(冻结的列会前置)5.1：manualColumnFreeze:true 设置true后在单元格中右击出现一个菜单，此菜单会多出一个“Unfteeze this columu”的选项，再次点击就会取消冻结动作。 默认为false6：给当前行/列的一个样式名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_colindex：行索引，当存在时在索引处插入或删除，不存在时在当前行后插入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/false15.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):使用验证器验证所有单元格
