v 一、总结(点击显示或隐藏总结内容)
一句话总结:jQuery Handsontable和jExcel.js
1、常用的可编辑表格插件有哪些?
jQuery Handsontable和jExcel.js
2、为什么可以考虑使用表格插件?
表格插件的话对表格做的比较精致,好看,而且提供了一般的常用的功能。
二、jQuery Handsontable【jQuery插件-一个非常酷的可编辑表格】
jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款类似于Excel的可编辑表格,通过HTML,JavaScript和jQuery可以对它进行实现)
我们来简单介绍下0.10.0-beta4,此版本也是最新版本,当然可能会有一些bug,但是,对于这种开源项目,我们也应该抱着一种尝试与学习的心态去面对,所以,我们就学习一下它的最新版本,同时如果大家发现bug还可以给作者提出,学习的乐趣不就在其中吗?
这个版本更加的灵活,它提供了更多的钩子方法(例如:事件和回调机制)和更多的灵活的操作,同时该版本兼容0.8版本的API,当然有一些具体的变化,大家可以看具体变化细节 。
在其官网中http://handsontable.com/ 我们可以看到非常好的演示效果,同时你可以点击Edit in jsFiddle进入在线编辑模式(jsFiddle是一款非常好用的js在线编辑演示工具,想在博客上演示自己的成果的js工程师们有福了),同时,我们可以点击Hide source code展现出来简单的代码。
在线编辑excel表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格
例子及指南
这个表格的非常重要的特性就是它能够像Excel表格那样,比如说 (1)你拖住右下角的一部分就可以将其复制单元格中的内容,当然这个只有当我们页面上有类似这种Excel表格页面编辑的时候,我们才可以这样使用,因为本身如果说你什么表格都使用这方面的功能的话,其实会让用户感觉到有”陷阱的感觉“,也就是说不能将一些本身不需要的功能直接加到页面上,会造成功能大于页面表现的这么一种情况,如果大家了解设计的话,可能我不太明了的表述,大家就不会感觉到空洞了; (2)另外一点就是一些头信息之类的都可以进行自定义修改,比较灵活,同时将一些日历插件封装,风格统一了,所以这样看来,还是非常不错的选择
三、jExcel.js-类似Excel的jquery电子表格插件
jexcel.js是一款轻量级的类似Excel的jquery电子表格插件 。你可以同js数组、json数据或CSV文件来为jexcel表格提供数据,你甚至可以直接从一个Excel表格中直接复制粘贴数据到jexcel表格中。
使用方法
在页面中引入jquery、jquery.jexcel.js和jquery.jexcel.css文件。
<link rel="stylesheet" type="text/css" rel="nofollow" href="css/jquery.jexcel.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jexcel.js"></script>
HTML结构
使用一个<div>
容器作为jexcel表格的容器。
<div id="my"></div>
初始化插件
在页面DOM元素加载完毕之后,通过下面的代码来初始化jexcel表格。
data = [ ['Google', 1998, 807.80], ['Apple', 1976, 116.52], ['Yahoo', 1994, 38.66], ];
$('#mytable').jexcel({ data:data, colWidths: [ 300, 80, 100 ] });
下面是一张带日期的jexcel表格的截图效果:
更多关于jexcel.js表格插件的信息,可以参考官方网站:http://bossanova.uk/jexcel
四、用表格插件的必要性
本文: 在线编辑excel表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格
Related Posts
jQuery hash 插件 URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。 Hash存储数据有什么用 首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val…