标签:
今天想讲讲一个很给力的JQUERY插件---Handsontable,它实现了在HTML中仿EXCEL效果,几乎在EXCEL中可以实现的功能,利用它都可以在页面中实现。
如:排序,分组,数据绑定,拖动复制等。
2:引入基础文件
<script data-jsfiddle="common" src="../demo/js/jquery.min.js"></script> <script src="../dist/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="../dist/handsontable.full.css">
<div id="example"></div>
4初始化
<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>
效果
先给出一些基础数据
<!doctype html> <html> <head> <meta charset='utf-8'> <title> Handsontable</title> <script data-jsfiddle="common" src="../demo/js/jquery.min.js"></script> <script src="../dist/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="../dist/handsontable.full.css"> </head> <body> <div id="example"></div> <script> var data = [//四行五列 ["2000", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2001", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2002", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2003", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2004", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2005", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2006", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2007", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2008", 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,87,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2009", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,8,6,78,5,6,6,35,6,3,6,3,8,38,3], ["2010", 30, 15, 12, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,52,6,3,5,3,8,6,8,5,6,56,355,6,3,66,23,8,38,3], ["2011", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,26,3,5,26,3,5,3,8,6,8,5,56,6,35,6,3,6,23,8,38,3], ["2012", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,666,5,8,6,3,9,6,3,5,56,3,5,3,78,6,58,55,6,6,35,6,23,6,3,8,38,3], ["2013", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,68,6,3,9,6,3,5,26,3,5,3,8,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2014", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,26,3,5,3,8,6,58,5,6,6,35,6,3,6,3,8,38,3], ["2015", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,29,26,3,5,6,3,5,3,78,76,8,5,6,6,35,6,3,6,3,8,38,3], ["2016", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,55,6,3,5,3,8,6,28,5,6,6,35,6,3,6,3,8,38,3], ["2017", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,43,9,6,3,5,6,3,5,3,8,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2018", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,62,3,29,6,3,5,6,3,5,3,8,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2019", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,48,6,3,9,6,3,5,6,3,5,3,8,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2020", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,68,6,3,9,6,3,5,6,3,5,3,8,6,8,5,6,6,345,6,3,64,3,8,38,3], ["2021", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,6,3,5,6,3,5,3,8,6,8,5,6,6,35,6,3,6,3,8,38,3], ["2022", 20, 11, 14, 13,14,15,16,17,18,19,20,21,22,22,3,3,55,66,5,8,6,3,9,66,3,5,6,3,5,3,8,6,8,5,6,6,35,6,3,6,3,48,38,23] ]; $("#example").handsontable({ data: data }) </script> </body> </html>
数据data的介绍
获取数据的方法:hot.getData()。
加载数据的方法:hot.loadData(data)。
当不需要显示某一列的时候可用如下格式设置:
columns:[{data:0},{data:2}]
这里就不显示第二列数据,只有第1、3列数据
现在我们在这个效果之上演示它的API
1.1:fixedRowsTop 冻结行(固定顶部开始算起指定行不随垂直滚动条滚动;
1.2:fixedColumnsLeft 冻结列(固定右边开始算起指定行不随水平滚动条滚动);
2.1:colHeaders:true 显示列表头, 默认false, 可取 true/fals/数组 ,当值为数组时,列头为数组的值
2.2:rowHeaders:true 显示行表头, 默认 false, 可取 true/fals/数组,当值为数组时,行头为数组的值
4.1: contextMenu:true 显示表头的下拉菜单默认false 可取 true/false/自定义数组
5.1:manualColumnFreeze:true 设置true后在单元格中右击出现一个菜单,此菜单会多出一个“Unfteeze this columu”的选项,再次点击就会取消冻结动作。 默认为false
6.1:currentRowClassName:"cur" 给当前行设置样式名(鼠标点击某个单元格,则整行给样式)
6.2:currentColClassName:"cur" 给当前行列设置样式名(鼠标点击某个单元格,则整行给样式)
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.1:autoColumnSize:true true/false //当值为true且列宽未设置时,自适应列大小
9.1:observeChanges:true/false //当值为true时,启用observeChanges插件
10.1:colWidths:[10,5,50],
11.1:stretchH:"last" 可取 last/all/none last:延伸最后一列,all:延伸所有列,none默认不延伸。
注意:
比如你移动的是列,
那么请你把鼠标放到列表头中,当出现一个手型时候可以拖动,拖动的只是数据,列表头不会跟着移动。
minCols:最小列数
minRows:最小行数
minSpareCols:添加空列
maxCols:最大列数
maxRows:最大行数
minSpareRows:添加空行
$("#example").handsontable({ data: data,//初始化时候的数据 fixedRowsTop:2, fixedColumnsLeft:3, colHeaders:data2,//显示l表头 rowHeaders:true,//显示表头 manualColumnResize:true, manualRowResize:true, contextMenu:true, manualColumnFreeze:true, manualColumnMove:true, currentColClassName:"cur", columnSorting:true, /*columns:[{data:0},{data:2}],*/ autoColumnSize:true, minSpareRows:2, observeChanges:true, colWidths:[10,5,50], stretchH:"last", groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}], autoColumnSize:true, manualColumnMove:true, manualRowMove:true });
为了获取这个handsontable对象,我们换一种方式初始化
var container = document.getElementById('example'); var hot = new Handsontable(container, { data: data }); console.log(hot)
现在我们抽出一些简单讲解下
用法
对象.方法(参数)
这里是
hot.alter(‘insert_row‘,0,2,‘ ‘,true);
clear()
console.log(hot.countCols())
deselectCell()
destory()
destoryEditor(reverOriginal)
去除当前编辑器,并选中当前单元格,渲染上该效果。如果reverOriginal不是true则被编辑的数据将被保存,如果为true,则会恢复之前的数据,不保存新的数据到单元格。
getActiveEditor()
参考文献
handsontable一个Excel一样的外观数据网格组件
标签:
原文地址:http://blog.csdn.net/qianqianyixiao1/article/details/51329523