Handsontable 给力的仿Excel JQuery插件

电玩女神 2022-06-02 05:24 438阅读 0赞

转自 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):**使用验证器验证所有单元格**