handsontable初步認知

hansontable簡介

是一個在線相似Excel的表格編輯器,支持豐富的展示和交互,有多樣的單元格類型供配置。

核心是由原生JavaScript構建,充分模塊化,支持自定義build。

除了核心表格渲染(實質就是js操做table,計算元素位置,自定義綁定事件處理),大部分功能以插件提供。能夠靈活構建插拔,自定義添加新功能插件。

特性

hansontable free版本提供的重要特性有：單元格下拉自動補全、註釋信息、右鍵菜單、複製粘貼、數據校驗、合併單元格等等。

兼容性

兼容提醒要求以下:

說明：

• 在ie9上處理大量數據時有限制。
• 有bug存在，有些特性用不了。
• 菜單操做比較卡

簡單配置demo體驗

http://runjs.cn/detail/foavmqxz

重要概念

• render

Handsontable把表格中cell值的展現和改變cell值的這兩個過程分割開了。renderer是負責渲染展現初始配置中的data數據和經過editor修改後的數據。
Renderer是一個簡單的函數，獲得實際cell的值，而後根據你定義的規則將值轉爲html code展現出來。

• editor

editor編輯器是用來處理用戶輸入（鼠標和鍵盤的事件），校驗數據。與起相關的主要就是EditorManager，它有四大功能

1：準備一個適當的editor對於一個激活的active cell
2：準備一個編輯器來展現
3：根據用戶的行爲展現編輯器
4：關閉編輯器

重要配置項（待更新）

1： render是一個重要配置項，自定義單元格的渲染。

上面遇到的一個問題就是初始實例配置中，設置爲Autocomplete類型render，後來被改成Text類型render。可是若是是在某個單元格操做時觸發render改變，當前操做的單元格顯示會有bug，後來我是換了種方法，獲取指定cell class名稱，用js直接操做單元格從而修改樣式。

2：comment插件，能夠自定義添加單元格的提示信息，包括信息內容和展示形式，這個我在作校驗而後展現提示信息的時候有用到。

3：contextMenu是右鍵菜單選項，能夠配置或自定義添加。例以下圖中清除內容選項就是自定義添加的邏輯而非原生提供配置項。

4：afterChane和afterValidate，用法和區別見下圖中的註釋，這個兩個方法挺重要的。

issue（待更新）

1:左上角單元格賦值問題，經過改源碼實現。

2：給autoComplete下拉元素添加懸浮title，其它好比經過點擊，懸浮等事件添加title時，titile出現的時機有問題。

3：autoComplete下拉單元格高度修改，css定位元素修改時下拉列表的最後一個顯示不全，有bug。

總結

首先說明一下，以上都是依據0.29 version得出的結論。接下來準備補充完善寫一些重要配置項和使用過程當中本身遇到的問題，關於issue和配置項若是你有更好的想法，歡迎留言交流。

吐槽

sg的實時保存，草稿箱沒用，實時保存，提示已經保存到草稿箱，去草稿箱查看剛剛編輯的內容卻不存在，你們注意點。