從零開始,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官網的【入門視訊】中,歡迎大家觀看學習。
>>視