在线编辑excel表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格

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表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格

 

例子及指南

 

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

 

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

在线编辑excel表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格

 

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表格的截图效果:

在线编辑excel表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格

更多关于jexcel.js表格插件的信息,可以参考官方网站:http://bossanova.uk/jexcel

 

四、用表格插件的必要性

 

 

本文: 在线编辑excel表格, jQuery Handsontable和jExcel.js表格编辑插件, 前端可编辑表格

Leave a Reply