2018年1月8日 星期一

(JS)jQuery Handsontable網頁Excel

jQuery Handsontable 是jQuery插件中一款非常酷的可編輯的表格，它的描述是：a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款類似於Excel的可編輯表格，通過HTML， JavaScript和jQuery可以對它進行實現)
來簡單介紹下0.35.0，此版本也是最新版本，當然可能會有一些bug，但是，對於這種開源項目，我們也應該抱著一種嘗試與學習的心態去面對，所以，我們就學習一下它的最新版本，同時如果大家發現bug還可以給作者提出，學習的樂趣不就在其中嗎？
這個版本更加的靈活，它提供了更多的鉤子方法（例如：事件和回調機制）和更多的靈活的操作，同時該版本兼容0.8版本的API，當然有一些具體的變化，大家可以看具體變化細節。
在其官網中我們可以看到非常好的演示效果，同時你可以點擊Edit in jsFiddle進入在線編輯模式（jsFiddle是一款非常好用的js在線編輯演示工具，想在博客上演示自己的成果的js工程師們有福了），同時，我們可以點擊Hide source code展現出來簡單的代碼。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
];

$('#example').handsontable({
  data: data,
  minSpareRows: 1,
  colHeaders: true,
  contextMenu: true
});

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)