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

时间：2024-04-17 09:33:07

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

一、总结

一句话总结：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展现出来简单的代码。

 

例子及指南

Appearance

Cell types

Editing

Integration

Backbone.jsTwitter BootstrapW3C Web Components (beta)

 

这个表格的非常重要的特性就是它能够像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

 

 

四、用表格插件的必要性

 

 

 

 

 

 

相关文章