前端可編輯表格插件有哪些

一、總結

一句話總結：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 renderers
• Custom HTML
• Scroll bars / Column stretch
  • Native scroll window ^BETA
  • Native scroll div ^BETA
• Conditional formatting
• Pre-populate new rows
• Highlight current row/col
• Column sorting
• Column resize & move
• Fixed rows/columns
• Pagination

Cell types

• Numeric
• Date
• Checkbox
• Dropdown ^NEW
• Autocomplete
• Password
• Handsontable

Editing

• Validation
• Drag-down
• Custom buttons
• Context menu
• Read-only cells
• Search of values

Integration

• Understand binding as reference
• Array, object, function data source
• Load & Save (Ajax)
• Options
• Callbacks beforeKeyDown

Backbone.js Twitter Bootstrap W3C 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

 

 

四、用表格插件的必要性