今天这篇文章要给大家推荐的是一个仿 Excel 表格编辑功能的?jQuery?插件 -?Handsontable。
Handsontable?是一个相当给力的 jQuery?插件,它实现了 HTML 页面中的表格编辑功能,并且是仿 Excel 的编辑效果。在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制、Ctrl+C 、Ctrl+V 等等。另外在浏览器支持方面,它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera。
如何使用
首先在页面中引入?jQuery?框架和?Handsontable?插件的相关 JS 和 CSS 文件,以下列出的两个是必要的,还有其它的是可选的,如果需要某个功能时就加上。
<script src="jquery.min.js"></script>
<script src="jquery.handsontable.js"></script>
<link rel="stylesheet" href="jquery.handsontable.css">
然后添加一个用于呈现 Excel 编辑表格的 DIV 层
<div id="site518_demo" class="dataTable"></div>
最后就可以对其进行初始化了
$('#site518_demo').handsontable({
rows: 5,
cols: 4,
minSpareCols: 1,
minSpareRows: 1,
contextMenu: false
});
var data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2011", 20, 11, 14, 13],
["2012", 30, 15, 12, 13]
];
$("#site518_demo").handsontable("loadData", data);