複製貼上、單元格格式和單元格型別

 

本週，讓我們一起來學習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官網的【入門視訊】中，歡迎大家觀看學習。

>>視