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),

  • Handsontable 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):使用验证器验证所有单元格
  • 你可能感兴趣的:(Jquery,Js,UI等前台技术,excel)