当前位置: 代码迷 >> Web前端 >> jQuery实现仿Excel表格编者功能 - Handsontable-转给力技术
  详细解决方案

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

热度:991   发布时间:2013-12-23 14:30:52.0
jQuery实现仿Excel表格编辑功能 - Handsontable-转给力技术

今天这篇文章要给大家推荐的是一个仿 Excel 表格编辑功能的?jQuery?插件 -?Handsontable。

jQuery实现仿Excel表格编辑功能 - 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);

  相关解决方案