jQuery实现仿Excel表格编辑功能 - Handsontable-转给力技术

今天这篇文章要给大家推荐的是一个仿 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);