前端可编辑表格插件有哪些

2018/07/10 16:16
阅读数 277

前端可编辑表格插件有哪些

一、总结

一句话总结: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表格那样,比如说 (1)你拖住右下角的一部分就可以将其复制单元格中的内容,当然这个只有当我们页面上有类似这种Excel表格页面编辑的时候,我们才可以这样使用,因为本身如果说你什么表格都使用这方面的功能的话,其实会让用户感觉到有”陷阱的感觉“,也就是说不能将一些本身不需要的功能直接加到页面上,会造成功能大于页面表现的这么一种情况,如果大家了解设计的话,可能我不太明了的表述,大家就不会感觉到空洞了; (2)另外一点就是一些头信息之类的都可以进行自定义修改,比较灵活,同时将一些日历插件封装,风格统一了,所以这样看来,还是非常不错的选择

 

三、jExcel.js-类似Excel的jquery电子表格插件

浏览《jExcel.js-类似Excel的jquery电子表格插件》小提示:

  1. 文章若附带资源/案例下载、效果/视频/动画演示,一般在文章底部资源列表里有提供
  2. 文章清晰的要点多数有加粗提示,多留意
  3. 涉及到代码地方,有清晰的代码样式。
  4. 文章内蓝色字体,多是本文的相关链接。
  5. 好文可以收藏到您个人的会员中心
  6. 要查阅跟本文相关的大量信息,可以访问专属栏目《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

 

 

四、用表格插件的必要性

 

 

 

 

 

 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部