前端可编辑表格插件有哪些
前端可编辑表格插件有哪些
一、总结
一句话总结: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展现出来简单的代码。
例子及指南
Integration
- Understand binding as reference
- Array, object, function data source
- Load & Save (Ajax)
- Options
- Callbacks beforeKeyDown
这个表格的非常重要的特性就是它能够像Excel表格那样,比如说 (1)你拖住右下角的一部分就可以将其复制单元格中的内容,当然这个只有当我们页面上有类似这种Excel表格页面编辑的时候,我们才可以这样使用,因为本身如果说你什么表格都使用这方面的功能的话,其实会让用户感觉到有”陷阱的感觉“,也就是说不能将一些本身不需要的功能直接加到页面上,会造成功能大于页面表现的这么一种情况,如果大家了解设计的话,可能我不太明了的表述,大家就不会感觉到空洞了; (2)另外一点就是一些头信息之类的都可以进行自定义修改,比较灵活,同时将一些日历插件封装,风格统一了,所以这样看来,还是非常不错的选择
三、jExcel.js-类似Excel的jquery电子表格插件
浏览《jExcel.js-类似Excel的jquery电子表格插件》小提示:
- 文章若附带资源/案例下载、效果/视频/动画演示,一般在文章底部资源列表里有提供
- 文章清晰的要点多数有加粗提示,多留意
- 涉及到代码地方,有清晰的代码样式。
- 文章内蓝色字体,多是本文的相关链接。
- 好文可以收藏到您个人的会员中心
- 要查阅跟本文相关的大量信息,可以访问专属栏目《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
四、用表格插件的必要性