摘要:復制粘貼單元格格式和單元格類型本周,讓我們一起來學習的復制粘貼單元格格式和單元格類型,希望我的學習筆記能夠幫助你們,從零開始學習,并逐步精通。
復制粘貼、單元格格式和單元格類型
本周,讓我們一起來學習SpreadJS 的復制粘貼、單元格格式和單元格類型,希望我的學習筆記能夠幫助你們,從零開始學習 SpreadJS,并逐步精通。
在此前的學習筆記中,相信大家已經學會并熟練掌握了SpreadJS的基本使用方法。下面,我們將更進一步,深入了解SpreadJS的數據綁定、單元格類型及前端導入導出Excel等核心功能,充分體驗“僅需100多行代碼,就可將Excel嵌入Web應用系統” 的全過程。
SpreadJS 學習筆記的配套視頻資料,請在此頁面觀看、下載。
SpreadJS 的復制粘貼將模板內容復制粘貼到Excel
SpreadJS 支持將模板內容通過復制粘貼的方式,導入Excel中,且保持復制粘貼內容的最大完整性和樣式,通過設置Workbook的options屬性的allowCopyPasteExcelStyle方法,可設置復制粘貼是否帶樣式。
如果允許復制粘貼樣式,即可選擇并復制一片帶樣式的區域,在Excel中的粘貼效果如下:
如果取消允許復制粘貼樣式,此時再次執行復制粘貼操作,則會在 Excel中顯示如下(樣式未被粘貼):
擴展 SpreadJS 的粘貼區域
當粘貼區域不夠時,SpreadJS支持自動擴展,可通過設置workbook.options.allowExtendPasteRange 屬性來實現此效果。
舉例,復制10行數據,在第28行的位置粘貼,SpreadJS模板的行數自動擴展到40行。取消選擇【擴展粘貼區域】這個功能項時,無法粘貼成功。
復制粘貼增強
SpreadJS 的復制粘貼增強功能包含:復制時是否帶行頭列頭。通過workbook.options.copyPasteHeaderOptions 屬性可設置復制時是否帶行頭、列頭,
如下圖,在【復制粘貼增強】下拉框中選擇含行頭列頭,選中整個B列、復制,在Excel中粘貼,效果如下,發現表頭B也被粘貼上:
SpreadJS 復制粘貼示例:copyPaste.zip
SpreadJS 的單元格格式使用 SpreadJS 可以為每個單元格設定不同的格式,常用的有時間格式、數字格式等。當原始數據不是我們想要的樣子時,都可以通過setFormatter方法設定格式。
如下圖,輸入框中輸入日期時間和數字,點擊下圖中的設置格式按鈕,即可在【展示效果】列生成展示效果:
自定義單元格格式
如果您需要創建一套有特殊規則的格式,例如下圖中的余額列:當余額為負數的時候顯示紅色,0-1000為黃色、1000以上為綠色時,對于這樣的需求可以使用自定義格式,效果如下圖:
會計專用格式
SpreadJS支持會計專用格式,可以滿足幾乎所有日常財務需要,最為常用的是數字格式化,為數字設置貨幣符號如人民幣符號"¥"、美元符號"$"、保留確定位數的小數位等。對于會計專業會使用到的:添加空格、重復字符、千分符與數值縮放、百分數、數字占位符等都可以使用下圖中展示的方式來設置:
SpreadJS 自定義單元格格式示例:CellFormatter.zip
SpreadJS 的單元格類型SpreadJS 中的單元格可以被設置為不同的類型,如按鈕、checkbox、下拉框、超鏈接、或自定義單元格等。您可以多帶帶給一個單元格設置類型,也可以把單元格類型綁定到某一列上,讓某一列成為一種類型的單元格。
按鈕單元格
您通過【按鈕單元格】可設定按鈕在單元格的位置,距離各邊距的位置、背景色和文字等。
// CellTypes可以是 Button、CheckBox、Combobox、hyperlink var b1 = new GC.Spread.Sheets.CellTypes.Button(); sheet.setCellType(3, 2, b1, GC.Spread.Sheets.SheetArea.viewport);
復選框單元格
SpreadJS的【復選框單元格】默認有兩種狀態:選中和未選中。當然,用戶也可通過isThreeState(true) 設定為三種狀態:選中、未選中和不確定狀態。
普通組合框單元格(單選下拉框)
通過設定是否可編輯editable(),您可以控制單元格是單選可輸入框或者單選不可輸入框。
超鏈接單元格
您可設置鼠標懸浮提示信息、設置未訪問及以訪問過的字體顏色、控制文本縮進、對齊方式、自動換行、設置回調函數等。如在下圖中,點擊超鏈接在回調中改變了表單名的樣式。
自定義單元格
在下面的例子中,姓名列為自定義單元格列,點擊后可多帶帶編輯:
自定義列頭
設定一個自定義超鏈接格式的列頭,點擊后對該列進行排序:
具體實現方法請查看示例:cellType.rar
以上就是SpreadJS 復制粘貼、單元格格式和單元格類型的學習筆記,希望通過我的記錄,您能快速掌握這些知識。也歡迎您加入葡萄城前端技術QQ群(720389894),第一時間獲取產品更新資訊以及前端開發趨勢。
下一周學習計劃: SpreadJS的圖表與形狀。
PS:文中提到的學習視頻和示例源碼,都已經上傳到SpreadJS官網的【入門視頻】中,歡迎大家觀看學習。
>>視頻地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105946.html
摘要:支持以下自定義特性的序列化與反序列化自定義單元格類型,自定義函數,自定義格式,自定義函數迷你圖,自定義標簽,以及自定義行篩選。 Spread JSON 導入導出 在SpreadJS表單控件中可以導入導出JSON數據,收集界面的錄入數據, 數據源序列化 若要將表單中的數據源序列化到JSON對象中,可以設置參數includeBindingSource: true,若未設置默認為false....
馬上就要開始啦這次共組織15個組隊學習 涵蓋了AI領域從理論知識到動手實踐的內容 按照下面給出的最完備學習路線分類 難度系數分為低、中、高三檔 可以按照需要參加 - 學習路線 - showImg(https://segmentfault.com/img/remote/1460000019082128); showImg(https://segmentfault.com/img/remote/...
摘要:前言羅子雄如何成為一名優秀設計師董明偉工程師的入門和進階董明偉基于自己實踐講的知乎為新人提供了很多實用建議,他推薦的羅子雄如何成為一名優秀設計師的演講講的非常好,總結了設計師從入門到提高的優秀實踐。 前言 羅子雄:如何成為一名優秀設計師 董明偉:Python 工程師的入門和進階 董明偉基于自己實踐講的知乎live為Python新人提供了很多實用建議,他推薦的羅子雄:如何成為一名優秀...
閱讀 2987·2021-11-23 09:51
閱讀 3004·2021-11-02 14:46
閱讀 869·2021-11-02 14:45
閱讀 2746·2021-09-23 11:57
閱讀 2498·2021-09-23 11:22
閱讀 1927·2019-08-29 16:29
閱讀 745·2019-08-29 16:16
閱讀 944·2019-08-26 13:44