摘要:待更新左上角單元格賦值問題,通過改源碼實現。下拉單元格高度修改,定位元素修改時下拉列表的最后一個顯示不全,有。
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的實時保存,草稿箱沒用,實時保存,提示已經保存到草稿箱,去草稿箱查看剛剛編輯的內容卻不存在,大家注意點。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81464.html
摘要:待更新左上角單元格賦值問題,通過改源碼實現。下拉單元格高度修改,定位元素修改時下拉列表的最后一個顯示不全,有。 hansontable簡介 是一個在線類似Excel的表格編輯器,支持豐富的展現和交互,有多樣的單元格類型供配置。 核心是由原生JavaScript構建,充分模塊化,支持自定義build。 除了核心表格渲染(實質就是js操作table,計算元素位置,自定義綁定事件處理),大部...
摘要:原文發布于個人博客歡迎訪問簡介是一個類似表格編輯器,支持豐富的展現和交互,以及多樣的單元格展現和配置核心由原生編寫,通過打包同類項目中,點贊最多,列表官網地址支持的特征的一些主要功能這里只列出主要功能,想了解更多更能,可以查詢官方文檔。這 原文發布于個人博客>>歡迎訪問 HandsonTable 簡介 Handsontable 是一個類似 excel 表格編輯器,支持豐富的展現和交互...
摘要:原文發布于個人博客歡迎訪問簡介是一個類似表格編輯器,支持豐富的展現和交互,以及多樣的單元格展現和配置核心由原生編寫,通過打包同類項目中,點贊最多,列表官網地址支持的特征的一些主要功能這里只列出主要功能,想了解更多更能,可以查詢官方文檔。這 原文發布于個人博客>>歡迎訪問 HandsonTable 簡介 Handsontable 是一個類似 excel 表格編輯器,支持豐富的展現和交互...
摘要:在單元格屬性配置中調用自定義的渲染方法調用首行渲染方法調用自定義渲染方法或者直接在中調用屬性這樣就能使用自定義的渲染方法了是元素,是事件名,是事件處理函數。 hansontable的渲染定義方式有多種,常見的有NumericRenderer、TextRenderer、CheckboxRenderer,但他們都是通過registerRenderer來渲染的,registerRendere...
摘要:生成報表數據都處理完了之后,就是生成報表了,報表這里稍微做的靈活了一點,是要讓用戶根據上傳的數據,自己選擇字段,然后用去生成對應的報表。 js-xlsx + handsontable + echarts 實現在前端導入excel數據并生成echart報表 前言 最近都在做類似 ERP 的項目,所以呢,又碰到一個比較變態的需求(至少對我來說是),在前端導入 excel 文件,然后在瀏覽器...
閱讀 869·2021-11-22 09:34
閱讀 1002·2021-10-08 10:16
閱讀 1816·2021-07-25 21:42
閱讀 1790·2019-08-30 15:53
閱讀 3518·2019-08-30 13:08
閱讀 2174·2019-08-29 17:30
閱讀 3341·2019-08-29 17:22
閱讀 2173·2019-08-29 15:35