從零開始，SpreadJS新人學習筆記【第5周】

複製粘貼、單元格格式和單元格類型

 

本週，讓咱們一塊兒來學習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官網的【入門視頻】中，歡迎你們觀看學習。

>>視頻地址